How to get route url params in Nuxt

Get URL params in Nuxt

In Nuxt 2

Using Composition API, in a script tag

                                
                                        <script lang="ts">
import { defineComponent, useRoute } from '@nuxtjs/composition-api';

export default defineComponent({
  setup() {
    const route = useRoute();
    // If the url parameter is "/?name=sen.ooo"
    const name = route.value.query.name // sen.ooo

    // Need to be return when using it in the template
    return {
      route
    }
  }
})
</script>
                                    
                            

In template

                                <template>
  <main>
    {{ route.query.name }}
  </main>
</template>
                            

In Nuxt 3

In a script tag

                                
                                        <script lang="ts" setup>
const route = useRoute();
// If the url parameter is "/?name=sen.ooo"
const name = route.query.name // sen.ooo

// If using it in template, we can use it directly
</script>
                                    
                            

In template

                                <template>
  <main>
    {{ route.query.name }}
  </main>
</template>
                            

Tags:Nuxt