useRoute, useRouter

Access this.$route and this.$router with the Nuxt Composition API.

In Vue 3, vue-router exports composition functions for accessing the current route and router.

These helpers provide an equivalent whilst using Nuxt 2.

useRoute

Returns this.$route, wrapped in a computed - so accessible from .value.

import { computed, defineComponent, useRoute } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const route = useRoute()
    const id = computed(() => route.value.params.id)
  },
})
When migrating to Nuxt 3 you will need to remove .value as the native equivalent returns a reactive object, not a computed object.

useRouter

Returns this.$router.

import { defineComponent, useRouter } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const router = useRouter()
    router.push('/')
  },
})
Edit this page on GitHub Updated at Tue, Mar 2, 2021