Nuxt - It is not possible to use useContext() within a watch() callback

I'm currently utilizing version 0.33.1 of @nuxtjs/composition-api along with Nuxt 2. Here's a snippet from my component:

import { defineComponent, useContext, useRoute, watch } from '@nuxtjs/composition-api';

export default defineComponent({
  setup () {
    const route = useRoute();

    // Other code...

    watch(() => route.value.query, () => {
      const { $axios } = useContext();
    });

    // Other code...
  }
});

My objective is to take action whenever the route.value.query undergoes a change. However, I keep encountering this error message:

Error: This must be called within a setup function.
    at useContext (index.mjs?9a99:220:1)
    at eval (search.vue?9447:34:1)
    at invokeWithErrorHandling (vue.common.dev.js?4650:3634:1)
    at call (vue.common.dev.js?4650:3271:1)
    at watcher.run (vue.common.dev.js?4650:3375:1)
    at flushSchedulerQueue (vue.common.dev.js?4650:3140:1)
    at Array.eval (vue.common.dev.js?4650:3760:1)
    at flushCallbacks (vue.common.dev.js?4650:3682:1)

Am I overlooking something here? Is there a way for me to utilize useContext() within the watch() callback? Or is this simply not feasible?

typescriptvue.jsnuxt.jsvue-composition-api

Answer №1

According to the information provided by the package developer, it has been verified that utilizing useContext() within the watcher callback is not feasible.

A suggested workaround involves invoking useContext() initially and then applying its returned values within the callback function.

import { defineComponent, useContext, useRoute, watch } from '@nuxtjs/composition-api';
export default defineComponent({
  setup() {
    const route = useRoute();
    // Other code...

    const { $axios } = useContext();
    watch(() => route.value.query, () => {
      // utilize $axios in this section
    });
    // Other code...
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue JS - Issue with data reactivity not being maintained

Currently, I have implemented a pagination indicator that displays the number of results on each page. For instance, page 1 shows '1-5' and page 2 shows '6-10 out of 50 results', and so on. The logic for updating the results seems to b ...

javascriptvue.jsvuejs2

What is the best way to convert JSON into a complex object in Typescript and Angular?

In my Typescript class for an Angular version 5 project, I have a JavaScript function that generates a style object. Here is the function: private createCircle(parameters: any): any { return new Circle({ radius: parameters.radius, ...

angulartypescript

Hide the FormArray in a Reactive Form if it is not populated or cannot be determined

As a newcomer to Angular 4, I've embarked on my first project and started learning the ropes. I have devised a Reactive Form to showcase a form structure that looks like this: Form (FormGroup) | --> aggLevels (FormArray) | --> ...

angulartypescriptangular-reactive-forms

What is the best way to shorten text in Angular?

I am looking to display smaller text on my website. I have considered creating a custom pipe to truncate strings, but in my situation it's not applicable. Here's what I'm dealing with: <p [innerHTML]="aboutUs"></p> Due to t ...

angulartypescript

Setting angular variables by assigning form values

My current reactive form setup looks like this: this.editform = new FormGroup({ 'username' : new FormControl(null,[Validators.required]), 'password' : new FormControl(null,[Validators.required]), 'full_name' : ne ...

angulartypescriptangular-reactive-forms

Is there an alternative course of action since determining if Observable is empty is not feasible?

I am diving into Angular 11 and exploring the world of Observables and Subjects as a beginner. Within my application, I have a mat-autocomplete component that organizes its results into categories. One of these categories is dedicated to articles, and I&a ...

angulartypescriptangular-observable

Should scripts be replayed and styles be refreshed after every route change in single page applications (SPA's)? (Vue / React / Angular)

In the process of creating a scripts and styles manager for a WordPress-based single page application, I initially believed that simply loading missing scripts on each route change would suffice. However, I now understand that certain scripts need to be ex ...

javascriptcssreactjsvue.jssingle-page-application

Encountering a problem with Angular 11 SSR after compilation, where the production build is causing issues and no content is being displayed in

{ "$schema":"./node_modules/@angular/cli/lib/config/schema.json", "version":1, "newProjectRoot":"projects", "projects":{ "new-asasa":{ "projectType": ...

angulartypescriptserver-side-renderingangular-universal

Encountering a maximum call stack size error in Nuxtjs during development mode, and a server error 500 in production, instead of being redirected to a custom error page,

Whenever I input a URL that doesn't exist, I often encounter my personalized error message but sometimes I receive a server error (Image) Here is the content of my error.vue page : <template> <div class="error-page"> <d ...

vue.jsnuxt.js

Exploring the differences between this.$emit and this.$root.$emit in Vue.js: a guide to best practices

My Vue2 components are dynamically added and removed using v-if. Sometimes, I need to communicate between these components by using $emit in the sender and $on in the receiver. I have been utilizing this.$root.$emit to broadcast custom events and this.$ro ...

vue.jsvuejs2event-handling

Updating the child JSON data format within a database using Vue.js

I am currently trying to update the rating value in the commented_type column. In Laravel, I typically use something like commented_type>rating for this purpose. However, I am unsure of how to accomplish this task using vue.js. The JSON structure of th ...

javascriptjsonvue.jsvuejs2vue-resource

Using axios to pass parameters in a post request

In my webpack project, I am currently using vue-resource for ajax calls. Everything works perfectly with "get" calls, but when I try a post request, my PHP file does not receive any parameters. Even when I use var_dump($_POST), it just gives me an empty ar ...

javascriptajaxpostvue.jsaxios

Dealing with errors while using the axios method in Vue.js

When receiving a response like this- data: Array(0) length: 0 What is the best way to handle this error and display a message indicating that no matching data was found in vuejs? ...

vue.js

Error Message: Module not found while using Node Express with TypeScriptIssue: A

I have set up a straightforward node express app using TypeScript. My goal is to implement an errorMiddleware in the index.ts file. As I try to start the server, I encounter the following error: at Module.require (node:internal/modules/cjs/loader:100 ...

node.jstypescriptexpress

Error encountered in vue.js due to a ReferenceError when the resize event is used

I'm having trouble obtaining the window height when resizing, and I keep encountering the error ReferenceError: calcOfSliderHeight is not defined. Can someone explain what's happening? Here is my code: let example = new Vue({ el: '#exam ...

javascriptvue.js

Which internal API allows for navigating to the daygridmonth, timegridweek, and timegridday views using a custom button?

I am looking to have the dayGridMonth displayed when I click on a custom button within FullCalendar. The functionality I want is for the dayGridMonthFunc to access the internal API daygridmonth and display the screen as a month. <div> & ...

javascriptvue.jsfullcalendarfullcalendar-5

Vue.js Google Places Autocomplete Plugin

I'm currently working on integrating Google Places Autocomplete with Vue.js. According to the API documentation, the Autocomplete class requires an inputField:HTMLInputElement as its first parameter, like shown in their example: autocomplete = new g ...

javascriptvue.jsgoogle-places-api

Discover the steps for retrieving the <div> element using the swiper API

Link to my page: Click here Design reference: View design The design requires flexing the 2 arrow buttons, but these elements are missing in the code(source: autoplay swiper). How can I align them to the right-bottom corner? <div class="flex" ...

vue.jsswiper.js

Guide on how to use Vue's watch feature to monitor a particular property within an array

I am interested in observing the "clientFilter" within an array TableProduit: [ { nr_commande: 0, date_creation: "", id_delegue: "1", clientFilter: "" } ], ...

javascriptvue.js

Using Vee-validate and vuetify to create a dynamic checkbox group with v-for loop

I am encountering an issue with integrating vee-validate, vuetify, and v-for in my code. Here is the snippet: <ValidationProvider name="availableLanguages" rules="required" v-slot="{ errors }" > <v-row> ...

vue.jsvuetify.jsvee-validate