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.

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

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

<DefaultLayoutWithVerticalNav :nav-items="navItems">

That's all 🥳