Want to take a look at our new docs? Our new docs are now in beta. Have fun!

The watchQuery Property

Watch query strings and execute component methods on change (asyncData, fetch(context), validate, layout, ...)

  • Type: Boolean or Array or Function (default: [])

Use the watchQuery key to set up a watcher for query strings. If the defined strings change, all component methods (asyncData, fetch(context), validate, layout, ...) will be called. Watching is disabled by default to improve performance.

If you want to set up a watcher for all query strings, set watchQuery: true.

export default {
  watchQuery: ['page']

You can also use the function watchQuery(newQuery, oldQuery) to have more refined watchers.

export default {
  watchQuery(newQuery, oldQuery) {
    // Only execute component methods if the old query string contained `bar`
    // and the new query string contains `foo`
    return newQuery.foo && oldQuery.bar

Warning: The new fetch hook introduced in 2.12 is not affected by watchQuery. For more information see listening to query string changes.


Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us