[Question] access meta params in component

[Pk13055]

I am trying to conditionally render the NavBar by checking for truthyness of a meta field.
Here's the relevant route definitions

    {
        path: '/login',
        name: 'Login',
        component: () => import('../views/Login.vue'),
        meta: {
            hidNav: true,  # SOLVED: spelling error, should be `hideNav`
        },
    },
    {
        path: '/logout',
        name: 'Logout',
        component: () => import('../views/Login.vue'),
        props: { logout: true },
        meta: {
            hidNav: true,  # SOLVED: spelling error, should be `hideNav`
        },
    },

And here is App.vue:

<template>
    <v-app>
        <NavBar v-if="!hideNav" />
        <v-main>
            <router-view />
        </v-main>
        <Footer />
    </v-app>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import Footer from './components/Footer.vue';
import NavBar from './components/NavBar.vue';
const route = useRoute();
const hideNav = computed(() => route.meta.hideNav);
</script>

[posva]

What is the question?

[Pk13055]

How can I access meta params defined on the route in the component, say using useRoute().meta.<param>?

[posva]

The usage you show is correct:

const route = useRoute();
const hideNav = computed(() => route.meta.hideNav);

[Pk13055]

Did you test it on your end? For me hideNav is still undefined..

[posva]

it's because in your code you have a typo hidNav instead of hideNav

[Pk13055]

Oh wow, I can't believe I missed that. Thanks so much!