Courses

How to Build Laravel 11 API From Scratch

Web Client with Vue.js

Summary of this lesson:
- Introduction to consuming Laravel API with Vue.js
- Making API calls using axios
- Using browser developer tools to debug API calls

This lesson will overview a client for our API using Vue.js. This course isn't about Vue.js, but in the feature, we will need to test the API with both clients, like postman, insomnia in a non-visual way and a web view visual way.

This lesson isn't about Vue.js but about how to consume the API.


I have made a Vue.js component called Home and loaded it.

resources/js/app.js:

import { createApp } from 'vue'
import Home from '@/components/Home.vue';
 
createApp({})
.component('Home', Home)
.mount('#app')

The component has a simple HTML code to show categories and products. But the main part of this code I want to show is the script part.

<template>
// ...
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
 
const categories = ref({})
const products = ref({})
 
const getCategories = async () => {
await axios.get('/api/categories')
.then(response => {
categories.value = response.data.data
})
.catch((error) => console.log(error))
}
 
const getProducts = async () => {
await axios.get('/api/products')
.then(response => {
products.value = response.data.data
})
.catch((error) => console.log(error))
}
 
onMounted(() => {
getCategories()
getProducts()
})
</script>

In this example, we have a typical axios GET call, and then after we have a response...

The full lesson is only for Premium Members.
Want to access all 23 lessons of this course? (58 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord