Nuxt, VueJS This must be called within a setup function

Question

I've got a project. It's currently available on a certain website. I need to implement some changes. When I download a project from gitlab and run it throws me an error:This must be called within a setup function.

path: .nuxt/composition-api/index.js

const useContext = () => {
  const vm = CompositionApi.getCurrentInstance();
  if (!vm)
    throw new Error("This must be called within a setup function.");
  return {
    ...(vm[globalNuxt] || vm.$options).context,
    route: CompositionApi.computed(() => vm.$route),
    query: CompositionApi.computed(() => vm.$route.query),

What is wrong?

I need to run the project to make some changes but can't deploy it on my local server.

Update: useContex is in default.vue

...
setup (_, { isServer, refs }: any) {
    // console.info(context)
    // const refs = context.refs
    const { store } = useContext()
    const { scrolllock } = scrollLock(store)
    const locationName = computed(() => store.getters.locationName)
    const location = computed({
      set (val: boolean) {
        store.dispatch('setLocationModal', val)
      },
      get () {
        return store.getters.locationModal
      }
    })
...

cmd output when I'm trying to go the site

[Vue warn]: [vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once.


 ERROR  [Vue warn]: Error in data(): "Error: This must be called within a setup function."                    22:50:04

found in

---> <Layouts/default.vue> at layouts/default.vue
       <Root>


 ERROR  [Vue warn]: Error in data(): "Error: This must be called within a setup function."                    22:50:05

found in

---> <Layouts/default.vue> at layouts/default.vue
       <Root>


 ERROR  [Vue warn]: Error in data(): "Error: This must be called within a setup function."                    22:50:24

found in

---> <Layouts/default.vue> at layouts/default.vue
       <Root>

The error suggests that you're using @vue/composition-api in addition to @nuxtjs/composition-api. You only need the latter, and you wouldn't need to call Vue.use(VueCompositionAPI) with that module. — tony19
– tony19, Commented Jun 5, 2021 at 20:52
Unfortunately, it didn't help. I deleted Vue.use(VueCompositionAPI) form composition-api.js and it didn't help. Maybe there's another way to start it? I need to change only scss files. — BBQBoi
– BBQBoi, Commented Jun 5, 2021 at 23:14
There's not enough context to determine the problem. Can you share a link to a reproduction? — tony19
– tony19, Commented Jun 8, 2021 at 4:59

Mohammad · Accepted Answer · 2023-07-13 09:14:11Z

6

From my experience, npm can't install @nuxtjs/composition-api older versions, or something like that, so I did uninstall its older version and install the new version and it's worked

here is what I've done

rm -rf node_modules && rm -rf package-lock.json && npm uninstall @nuxtjs/composition-api && npm i @nuxtjs/composition-api && npm i

edited Jul 13, 2023 at 9:14

answered Jul 11, 2022 at 19:12

Mohammad

6811 gold badge7 silver badges22 bronze badges

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

Comments

Mostafa Said · Accepted Answer · 2023-08-21 19:57:46Z

1

In my case, I faced this error while converting a mixin file into a composable function. It got fixed when I used useContext inside the function and not out.

Instead of this

import { useContext } from '@nuxtjs/composition-api'
const { $device } = useContext()

export const usePreload = () => {
... // rest of the code
}

Changed to this

import { useContext } from '@nuxtjs/composition-api'

export const usePreload = () => {

... // rest of the code
}

answered Aug 21, 2023 at 19:57

Mostafa Said

1,0752 gold badges10 silver badges29 bronze badges

Comments

Solar · Accepted Answer · 2022-01-10 07:32:17Z

From the look of things, it seems you

You created another plugin for the VueCompositionAPI when it is installed already e.g @nuxtjs/composition-api

I would advise you to remove any other composition-api from your project and stick to the latest version of the official @nuxtjs/composition-api with Vuex v4 for Nuxt 2

In the latest version of @nuxtjs/composition-api, you could use

const store = useStore();
// OR
const { store } = useContext();

NOTE: You have to define the helper functions like const router = useStore() directly inside your setup() function, and not inside your method, to avoid This must be called within a setup function error.

For those that want to use route

To smooth your upgrade to Nuxt 3, it is recommended not to access route, query, from and params from useContext but rather to use the useRoute helper function.

BBQBoi · Accepted Answer · 2021-06-08 19:58:52Z

-3

I don't know what happened there. I deleted that repository and cloned it again. Next up I did this: npm init and then npm run dev And it works.

answered Jun 8, 2021 at 19:58

BBQBoi

31 gold badge1 silver badge5 bronze badges

Collectives™ on Stack Overflow

Nuxt, VueJS This must be called within a setup function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related