Question

I am using latest nuxt version and when I tried to use the useRoute method is triggers a "Cannot Find name useRoute" but it works so I would like to know what could I be missing

My package json has these versions

"devDependencies": {
  "@nuxt/devtools": "latest",
  "@types/node": "^18",
  "nuxt": "^3.6.1"
},
"dependencies": {
  "@nuxt/image": "^1.0.0-rc.1",
  "@nuxtjs/tailwindcss": "^6.8.0",
  "@vuepic/vue-datepicker": "^5.3.0",
  "nuxt-icon": "^0.4.1",
  "nuxt-swiper": "^1.1.1"
}

The useRoute autocompletes fine in pages/index.vue but if I try to use it in different vue file or directory inside pages it triggers the same error

Answer 1

You are not importing the useRoute method from the Nuxt composables module. The useRoute method is a composable function that allows you to access the current route object in Nuxt 3 and Composition API. You need to import it from the @nuxtjs/composition-api module and use it inside the tag or the setup() function of your component.

<script setup>
    import { useRoute } from "@nuxtjs/composition-api";
    const route = useRoute();
</script>

Or

<script>
    import { useRoute } from "@nuxtjs/composition-api";
    export default {
      setup() {
        const route = useRoute();
        console.log(route.name);
      },
    };
</script>

To learn more, see https://nuxt.com/docs/api/composables/use-route

友情链接