Appearance
Fetching nav items from API
In this code example. We will look at how to fetch nav items from API and render it in our layout.
INFO
We will use @fake-db to simulate API response.
Fake API endpoint
As this fake API we won't create a new file we will just update an existing file. Let's add fake API endpoint in src/@fake-db/db.ts
file.
ts
import './jwt'
import mock from './mock'
const navData = [
{ heading: 'Dashboards' },
{
title: 'Home',
icon: { icon: 'mdi-home'},
to: 'index',
action: 'read',
subject: 'Auth',
},
]
mock.onGet('/nav-items').reply(async () => {
await new Promise(resolve => setTimeout(resolve, 2000))
return [200, navData]
})
// forwards the matched request over network
mock.onAny().passThrough()
js
import './jwt'
import mock from './mock'
const navData = [
{ heading: 'Dashboards' },
{
title: 'Home',
icon: 'i-mdi-home',
to: 'index',
action: 'read',
subject: 'Auth',
},
]
mock.onGet('/nav-items').reply(async () => {
await new Promise(resolve => setTimeout(resolve, 2000))
return [200, navData]
})
// forwards the matched request over network
mock.onAny().passThrough()
Using nav items from API
Now let's consume above API endpoint and pass response to our nav menu so it renders nav items from our API. For this we will update the src/layouts/default.vue
vue
<script lang="ts" setup>
import navItems from '@/navigation/vertical'
import axios from '@axios'
const navItems = ref([])
axios.get('nav-items')
.then(({ data }) => {
navItems.value = data
})
</script>
Next, Please make sure you are passing navItems
in nav-items
prop of DefaultLayoutWithVerticalNav
component.
vue
<DefaultLayoutWithVerticalNav :nav-items="navItems">
That's all 🥳