I am developing a website using nuxt.js which is based on vue.js. The site is a simple site with a number of pages on content. I want to create a ponent that knows where in the content it is and therefore need to access the router object. I have tried $nuxt.$route.path but get a error. How to i import the $nuxt or $router objects to access them in my ponent?

My template ponent

<template>
  <div>
      <hr>
      <p>{{ $store.state.menuitems[0] }}</p>
      <hr>
      <div class="artfooter">
        <span>i want name of current route here</span>
      </div>
      <br>
  </div>
</template>


<style scoped>
.artfooter{
    font-size: 0.8em;
    display: flex;
    justify-content: space-between;
}
</style>



<script>
  import store from '~/store/index'
  //how to import $nuxt object to access router??
  console.log(store)
  console.log(this.$router.path)
  // the above console.log reports error
  // Cannot read property 'middleware' of undefined

  export default {
  }
</script>

I am developing a website using nuxt.js which is based on vue.js. The site is a simple site with a number of pages on content. I want to create a ponent that knows where in the content it is and therefore need to access the router object. I have tried $nuxt.$route.path but get a error. How to i import the $nuxt or $router objects to access them in my ponent?

My template ponent

<template>
  <div>
      <hr>
      <p>{{ $store.state.menuitems[0] }}</p>
      <hr>
      <div class="artfooter">
        <span>i want name of current route here</span>
      </div>
      <br>
  </div>
</template>


<style scoped>
.artfooter{
    font-size: 0.8em;
    display: flex;
    justify-content: space-between;
}
</style>



<script>
  import store from '~/store/index'
  //how to import $nuxt object to access router??
  console.log(store)
  console.log(this.$router.path)
  // the above console.log reports error
  // Cannot read property 'middleware' of undefined

  export default {
  }
</script>

• javascript
• vuejs2
• frontend
• nuxt.js

• What are your errors? Can you include some code samples how you're trying to access it from your ponent? – Steve Hynding Commented Jan 6, 2018 at 22:25

5 Answers 5

You access it with this:

this.$route.path

Nuxt way of doing it by using either of it below:

// say that we are in "About Us" page

this.$nuxt.$route.name // returns 'about-us'
this.$nuxt.$route.path // returns '/about-us'

You can also access the route and router object from the global $nuxt object this way

 this.$nuxt._route
 this.$nuxt._router

In Nuxt 3

you can use the useRouter posable (Example given below)

or useRoute posable

See more info here:

https://nuxt./docs/api/posables/use-router

https://nuxt./docs/api/posables/use-route

<script setup>

const router = useRouter();

const someFunction = () => {
    // directly use router
    router.push('/some-path')
}

</script>
<template>

<div>{{ router.path }}</div>

</template>

As far as general methods are concerned, I personally think that the best method is:

const store = window.$nuxt.$store
const router = window.$nuxt.$router

However, it should be noted that:

$ nuxt cannot be accessed until initialization is plete, so this method needs to be used after initialization.