Error: Unknown custom element: <router-link>

[gabyrusu]

I have an error when trying to build a sidebar navigation with sub-navs:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component )

Here is my template:

<v-sidebar id="sidebar" fixed>
    <v-sidebar-items v-bind:items="sidebar_items"></v-sidebar>
</v-sidebar>

and my sidebar_items object:

sidebar_items: [
    { text: 'Dashboard', href: '#!', icon: 'dashboard' }
    {
        parent: { text: 'Users', href: '#!', icon: 'group' },
        items: [
              { text: 'All users', href: '#!' },
              { text: 'Deleted users', href: '#!' }
        ]
    }
]

This is the HTML:

<ul class="sidebar__items">
    <li>
        <router-link active-class="sidebar__item--active" to="#!" class="sidebar__item">
                <i class="material-icons icon">
                    <span>dashboard</span>
                </i>
                <span>Dashboard</span>
        </router-link>
    </li>
    <li class="sidebar__group">
        <a href="#!" class="sidebar__item-header">
            <i class="material-icons icon">
                <span>group</span>
            </i>
            <span>Users</span>
        </a>
        <ul class="sidebar__items" style="display: none; height: 0px;">
            <li>
                <router-link active-class="sidebar__item--active" to="#!" class="sidebar__item">
                    <!---->
                    <span>All users</span>
                </router-link>
            </li>
            <li>
                <router-link active-class="sidebar__item--active" to="#!" class="sidebar__item">
                    <!---->
                    <span>Deleted users</span>
                </router-link>
            </li>
        </ul>
    </li>
</ul>

What am I doing wrong here??

[johnleider]

Are you using a Vuetify template or your own? The error would tell me that you do not have vue-router installed.

[gabyrusu]

I have vue-router installed. I'm trying to build my own template based on the vuetify documentation.

[johnleider]

Could you try reinstalling your node_modules.

#npm
rm -rf node_modules
npm install

#yarn
yarn upgrade

And let me know if it continues to happen.

[gabyrusu]

nothing changed... I'm still getting the same error

[gabyrusu]

This is the firts SidebarItem component in Vue Devtools

<SidebarItem>
group: null
group: null computed
item: Object prop
    href: "#!"
    icon: "dashboard"
    text: "Dashboard"
    router: true prop
sidebar: null
sidebar: 12 computed

maybe it helps...

[johnleider]

Do you have a repository that you can link me to or a reproduction link? The error you are having has to do with the registering of vue-router. The SidebarItem component only uses the router-link component.

[gabyrusu]

I just added one now: https://github.com/gabyrusu/vuetify

Thanks!

[johnleider]

You are not using vue-router in your code at all. You have installed it in npm, but that's it.

[johnleider]

You can review the official documentation for vue-router here.

[gabyrusu]

I'm so stupid... I looked over that code 3 times before opening this issue and didn't see that vue router is missing.

Thanks a lot for your help!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord