CODEWITHSUNDEEP
vuejs3vuepress
Otto Paulsen
Otto Paulsen

Reputation: 372

How can I get dynamic navbar links in Vuepress 2?

TL;DR

I am using Vuepress 2 for documentation, and I want to control dynamically, based on user roles, what links that are visible in the navbar. How can I do that?

More details

The thing I want to achieve is that some pages shall only be visible to some users. I have managed to control this on page level like this:

So on page level it works. However, I also want to show only links to allowed pages in the navbar and sidebar. I haven't looked at the sidebar yet, but I have tried to get this working in navbar without success.

I can use a function to return the navbar in the config.js file, but this function runs before the onGenerated function, so the temp-file is not yet created. I need app.pages to generate the temp file, but that is not available in the function that creates the navbar.

So, are there any ideas out there to how I can do this?

Upvotes: 2

Views: 410

Answers (1)

Andy
Andy

Reputation: 127

Maybe this will help?

import { defineClientConfig } from '@vuepress/client'
import {homeNavbar} from "./theme/config/home";
import {quasarNavbar} from "./theme/config/frontend/quasar";

export default defineClientConfig({
    enhance({ app, router }) {

        router.afterEach((to) => {

            if (to.path === '/') {
                app.config.globalProperties.$theme.navbar = homeNavbar
            }

            if (to.path.includes('/frontend/quasar')) {
                app.config.globalProperties.$theme.navbar = quasarNavbar
            }

        })
    }
})

Source: https://github.com/vuepress/vuepress-next/discussions/1295

Upvotes: 0

Related Questions