Generate a navigation menu based on a JSON object in Vue 3

First, we need to create a JSON object to represent our navigation menu structure:

const menuData = [
    {
        "title": "Home",
        "link": "/"
    },
    {
        "title": "Tutorials",
        "link": "/tutorials",
        children: [
            {
                "title": "JavaScript",
                "link": "/tutorials/javascript"
            },
            {
                "title": "jQuery",
                "link": "/tutorials/jquery"
            },
            {
                "title": "Vue.js",
                "link": "/tutorials/vue"
            }
        ]
    },
    {
        "title": "Contact",
        "link": "/contact"
    }
];

Next, we need to create the HTML code for a simple navigation menu structure. For less complexity, I'll use the Bootstrap 5 Framework.

<div class="nav-wrapper" id="app">
    <nav class="navbar navbar-expand-lg bg-white">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Brand</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">

                <!-- Vue component that renders the navigation menu -->
                <navigation-menu />

            </div>
        </div>
    </nav>
</div>

Now let's create a Vue application and then a Vue component called NavigationMenu that will render the navigation menu:

const { createApp, ref, computed } = Vue;

const app = createApp({
    name: "navigation menu"
});

app.component('NavigationMenu', {
    template: "#navigation-menu",
    setup() {
        const menu = ref(menuData);

        const attrs = (item) => {
            if (item.children) {
                return {
                    "role": "button",
                    "data-bs-toggle": "dropdown"
                }
            }
            return null;
        }

        return { menu, attrs }
    }
});

app.mount('#app');

The last thing we need to do is to create the NavigationMenu template:

<script type="vue-template" id="navigation-menu">
    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item" v-for="(item, index) in menu" :key="index" :class="{'dropdown': item.children}">
            <a class="nav-link" :href="item.children ? '#' : item.link" v-bind="attrs(item)" :class="{ 'dropdown-toggle': item.children }">{{ item.title }}</a>
            <ul class="dropdown-menu" v-if="item.children">
                <li v-for="(subitem, index) in item.children" :key="index">
                    <a class="dropdown-item" :href="subitem.link">{{ subitem.title }}</a>        
                </li>
            </ul>
        </li>
    </ul>
</script>

Demo:

See the Pen Generate a navigation menu based on a JSON object in Vue 3 by Stanescu Eduard-Dan (@ZsharE) on CodePen.