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
        })
        .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.