Dynamically create the items of a NavBar

[HeytalePazguato]

I have a Navbar.vue component where I am attempting to create the Links dynamically:

<script setup>
import { Link } from '@inertiajs/vue3';
import { usePage } from '@inertiajs/vue3';
import { ref, computed } from 'vue';
import Dropdown from '@/Components/Dropdown.vue';
import { IconSun, IconMoonStars, IconDeviceDesktopCog } from '@tabler/icons-vue';

const { props } = usePage();
const user = computed(() => props?.auth?.user || null);

const baseNavbarLinks = [
    { name: 'Home', route: 'home' },
    { name: 'About', route: 'home' },
    { name: 'Contact', route: 'home' },
];

const authNavbarLinks = computed(() => [
    { name: user?.value?.name || 'User', route: 'dashboard'},
    { name: 'Logout', route: 'logout'},
]);

const notAuthNavbarLinks = [
    { name: 'Login', route: 'login'},
    { name: 'Register', route: 'register'},
];

const navbarLinks = computed(() => {
    return baseNavbarLinks.concat(user.value ? authNavbarLinks.value : notAuthNavbarLinks);
});
</script>

<template>
    <nav class="bg-white border-gray-200 dark:bg-bluegray-dark z-50">
        <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
            <a href="/" class="flex items-center space-x-4 rtl:space-x-reverse">
                <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
                <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Title</span>
            </a>
            <div class="flex items-center space-x-4 rtl:space-x-reverse">
                <Link
                    v-for="link in navbarLinks"
                    :href="route(link.route)"
                    class="inline-flex items-center font-medium justify-center cursor-pointer dark:text-white hover:underline text-gray-900 pb-1"
                    >
                        {{ link.name }}
                </Link>
            </div>
        </div>
    </nav>
</template>

Basically, I want to have the baseNavbarLinks always and dynamically change between the authNavbarLinks and notAuthNavbarLinks depending on the authenticated user.

The issue I have now is that I render the page, it shows baseNavbarLinks with notAuthNavbarLinks, then I Login, I get redirected to the dashboard but the Navbar.vue keeps showing the baseNavbarLinks with notAuthNavbarLinks. Even if I reload the page it keeps showing those Links. After modifying the file and saving it switches to baseNavbarLinks with authNavbarLinks.

Then I logout and it keep showing baseNavbarLinks with authNavbarLinks until I reload the page.

How can I dynamically change the computed navbarLinks so it renders the correct Links always?

[mutasim77]

so what about using watch here to keep an eye on the auth state and update the links when it changes? Something like this:

<script setup>
import { Link, usePage } from '@inertiajs/vue3';
import { ref, computed, watch } from 'vue';
import Dropdown from '@/Components/Dropdown.vue';
import { IconSun, IconMoonStars, IconDeviceDesktopCog } from '@tabler/icons-vue';

const page = usePage();

const isAuthenticated = computed(() => !!page.props.auth.user);
const user = computed(() => page.props.auth.user);

const baseNavbarLinks = computed(() => [
    { name: 'Home', route: 'home' },
    { name: 'About', route: 'about' },
    { name: 'Contact', route: 'contact' },
]);

const authNavbarLinks = computed(() => [
    { name: user.value?.name || 'User', route: 'dashboard' },
    { name: 'Logout', route: 'logout' },
]);

const notAuthNavbarLinks = computed(() => [
    { name: 'Login', route: 'login' },
    { name: 'Register', route: 'register' },
]);

const navbarLinks = ref([]);

const updateNavbarLinks = () => {
    navbarLinks.value = [
        ...baseNavbarLinks.value,
        ...(isAuthenticated.value ? authNavbarLinks.value : notAuthNavbarLinks.value)
    ];
};

watch(isAuthenticated, updateNavbarLinks, { immediate: true });
watch(user, updateNavbarLinks);

</script>

<template>
    <nav class="bg-white border-gray-200 dark:bg-bluegray-dark z-50">
        <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
            <a href="/" class="flex items-center space-x-4 rtl:space-x-reverse">
                <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
                <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Title</span>
            </a>
            <div class="flex items-center space-x-4 rtl:space-x-reverse">
                <Link
                    v-for="link in navbarLinks"
                    :key="link.name"
                    :href="route(link.route)"
                    class="inline-flex items-center font-medium justify-center cursor-pointer dark:text-white hover:underline text-gray-900 pb-1"
                >
                    {{ link.name }}
                </Link>
            </div>
        </div>
    </nav>
</template>

[HeytalePazguato]

I have tried and it works! Thank you

I tried to use watch but only for the user, I tried only to log in the console the new user to check if it was working but since I never saw the entries in the console I assumed watch didn't work.