Web Client with Vue.js

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 data is set to a variable.

If you go to your browser developer tools, the primary tabs you want to look at are Console and Network.

In the Console tab, you will see what errors may happen from the API or the Javascript.

We can see all the requests made in the' Network' tab. Besides loading assets, we can see two API requests.

After pressing one of the API calls first in the Headers, we can see the status.

And in the Response, we can see the actual response.

List inside of List: Multi-Level Data Data Pagination via API

Course Content

How to Build Laravel 11 API From Scratch

Web Client with Vue.js

Course Content

Getting Data via Laravel API

Posting Data via Laravel API

Authentication and Authorization

Additional Various Topics