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