Vue js3: How to add router link & icons in aray items - vue.js

Question

I have an array of nav items including subnav I have added to a sidebar component in a dashboard I am making.
I will like to add router links with different icons to each item in the array. I am still trying to wrap my head around how to do it and I really need help.
below is the code sample.
Array nav items
state: {
navigation: [
{title: "Home"},
{
title: "Posts",
poen: true,
subnav:[
{title: "Published"},
{title: "Draft"},
{title: "Trashed"},
]
},
{
title: "Users",
open: true,
subnav:[
{title: "Admins"},
{title: "Authors"},
{title: "Editors"},
{title: "Subscribers"}
]
},
]
},
getters: {
navigation: state => {
return state.navigation
}
},
Sidebar menu items
<ul id="navigation">
<li v-for="(item, index) in navigation" :key="'item'+index">
<div class="title" #click="item.open = !item.open">{{item.title}}</div>
<Dropdown v-if="item.subnav" :list="item" />
</li>
Drop Down Items
<ul v-show="list.open">
<li v-for="(item, index) in list.subnav" :key="'item' +index">
<div class="title" #click="item.open = !item.open">{{item.title}}</div>
<Dropdown v-if="item.subnav" :list="item" />
</li>
So that in the end, I want to achieve something like this:

Answer 1

You can do it two ways (or more)
1st, you can import and add the icon class to the array of objects to later bind it to the template.
Eg. heroicons and usage.
import { UserCircleIcon, ..otherIconsImaginary } from "#heroicons/vue/solid";
navigation: [
{title: "Home", icon: UserCircleIcon},
{title: "Posts",poen: true,icon: PostsIcon,
subnav:[
{title: "Published", icon: SomeOtherIcon},
{title: "Draft", icon: DraftsIcon},
{title: "Trashed", icon: TrashedIcon},
]
}
]
Then on your template bind it as a component
2nd, Import your icons from anywhere and then define icon classes for all objects.
navigation: [
{ title: "Home", icon_class: "home-icon" }...
]
then bind it as an image like this
<img :src="homeIcon" alt="" v-if="item.icon_class === 'home-icon'" />
PS. I think you should use the state for user information management only. This code can be finished in layouts since you can have multiple layouts for authenticated, non-authenticated, 404, and other pages as per your business logic wideness.