Fetch query string value from URL with NuxtJS and AsyncData method

Question

I try to fetch value of the name parameter in URL: http://fakelocalhost:3000/page?name=test

I'm using NuxtJS (v2.11.0) and TypeScript, with nuxt-property-decorator package (v2.5.0).

But, I get an undefined result with console.log(params.name).

Here, my full TS code:

<script lang="ts">
  import {
    Component,
    Vue
  } from "nuxt-property-decorator";

  @Component({
    asyncData({ params  }) {
      console.log(params.name);
    }
  })
  export default class extends Vue {}
</script>

pirmax · Accepted Answer · 2020-01-26 18:59:26Z

10

I found the solution...

asyncData({ route }) {
   console.log(route.query.name);
}

Use route object instead of params in asyncData method.

answered Jan 26, 2020 at 18:59

pirmax

2,14310 gold badges40 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kalak · Accepted Answer · 2021-01-27 21:52:24Z

6

You can also use the context parameter: query https://nuxtjs.org/docs/2.x/internals-glossary/context#query

asyncData({ query }) {
   console.log(query.name);
}

answered Jan 27, 2021 at 21:52

kalak

711 silver badge1 bronze badge

Collectives™ on Stack Overflow

Fetch query string value from URL with NuxtJS and AsyncData method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related