useRoute / useRouter return undefined instead of current route / router

[ThomasRbn]

Hey there, im trying to get route in my vue component but useRoute function return undefined
Here is my component

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import axios from "axios";
import ProductForm from './ProductForm.vue';

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
}

const product = ref<Product>({
  id: 1,
  name: 'Product 1',
  description: 'Description of product 1',
  price: 10,
});

const route = useRoute();
onMounted(async () => {
  try {
    console.log(route); //Undefined
    // const response = await axios.get(`/api/product/${route.params.id}`);
    // product.value = response.data;
  } catch (error) {
    console.log(error);
  }
});
</script>

<template>
  <h1>Edit a product</h1>
  <ProductForm :product="product"/>
</template>
 

My routes :

export default [
    {
        path: '/',
        component: () => import('@js/components/Home.vue'),
        name: 'home'
    },
    {
        path: '/product',
        component: () => import('@js/components/product/ProductIndex.vue'),
        name: 'product.index'
    },
    {
        path: '/product/:id',
        component: () => import('@js/components/product/ProductShow.vue'),
        name: 'product.show'
    },
    {
        path: '/product/edit/:id',
        component: () => import('@js/components/product/ProductEdit.vue'),
        name: 'product.edit'
    },
    {
        path: '/product/new',
        component: () => import('@js/components/product/ProductNew.vue'),
        name: 'product.new'
    },
]

My Router :

import routes from './routes'
import {createRouter, createWebHistory} from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router

My app :

import '@css/global.scss';

import {createApp} from 'vue';
import router from "./router/router";

const app = createApp({})
app.use(router)
app.component('main-header', require('@js/components/MainHeader.vue').default)
app.mount('#app')

[denbon05]

computed solved this for me

<script setup lang="ts">
import { RouteNames } from '@/types/router';
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const appBarIcon = computed(() =>
  route.name === RouteNames.Home ? 'mdi-account' : 'mdi-home'
);
const routerLinkName = computed(() =>
  route.name === RouteNames.Home ? RouteNames.Profile : RouteNames.Home
);
</script>

<template>
  <v-app-bar>
    <!-- <v-app-bar-title>{{ { appBarIcon, routerLinkName } }}</v-app-bar-title> -->

    <template v-slot:append>
      <router-link
        :to="{
          name: routerLinkName,
        }"
      >
        <v-app-bar-nav-icon :icon="appBarIcon"></v-app-bar-nav-icon>
      </router-link>
    </template>
  </v-app-bar>
</template>