A SEO friendly way to make menu's in VUE3

Home Code A SEO friendly way to make menu's in VUE3

Since VUE3 doesn't care about SEO (but we do!), I've opted for a simple but effective way to design the navigation of the website. Basicly, all the dock component does is open and close itself. It isn't at all interested in the actual menu, which is added to a container using a slot. This keeps the menu available for webcrawlers, and we don't have to fetch the required data.

Add the dock component

Assuming you've added VUE3 and instantiated an application instance, all you have to do is add the following component.

                            /*
 * The dock is a simple component that can be either open or closed. Since it works
 * with simple CSS class manipulation, you can design this any way you want. Thanks
 * to the slots the component can easily be filled with content while staying quite
 * SEO-friendly.
 * 
 * SLOTS
 * menu: used to slot in the menu design.
 * navi: used to slot in the navicon design.
 */
app.component('dock', 
{
    name:"Dock",
    data() {
        return {
            open:false
        }
    },
    methods: {
        toggle(){
            this.open = !this.open;
        },
        resize(){
            this.open = false;
        }
    },
    template:
    `
    <div class="dock" :class="{open:open}">
        <div class="dock-viewport" :class="{open:open}">
            <div class="dock-menu" :class="{open:open}">
                <slot name="menu"></slot>
            </div>
        </div>
    </div>
    <div class="navbar">
        <div class="navicon" v-on:click="toggle">
            <slot name="navi"></slot>
        </div>
    </div>
    `,
    mounted:function(){
        window.addEventListener('resize', this.resize);
    }
});                        

Add the HTML code to a template

In this case I've added the code to navigation.php, a PHP include I use on almost every page, but you can also add it directly to a template file.

                            <dock>
    <template v-slot:menu><!-- render your menu code here! --></template>
    <template v-slot:navi><i class="fa fa-bars"></i></template>
</dock>                        

Tech Stack

PHP

HTML

Javascript

C#

CSS