Error in setup: "Error: You must use this function within the "setup()" method, or insert the store as first argument."

[rafaelmagalhaes]

I started a new nuxt project form scratch added nuxt-composition-api and vuex-composition-helpers package

I get this error Error in setup: "Error: You must use this function within the "setup()" method, or insert the store as first argument." when trying to access store

// index.vue

<template>
  <div>
    {{ getLoadingState }}
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "@nuxtjs/composition-api";
import { useNamespacedGetters } from "vuex-composition-helpers";

export default defineComponent({
  name: "Index",
  setup() {
    const { getLoadingState } = useNamespacedGetters("loading", [
      "getLoadingState",
    ]);
    const nuts = ref("text");

    return {
      nuts,
      getLoadingState,
    };
  },
});
</script>

// nuxt.config.ts

buildModules: [
    // https://go.nuxtjs.dev/typescript
    "@nuxt/typescript-build",
    "@nuxtjs/composition-api/module",
  ],

build: {
    transpile: ["vuex-composition-helpers"],
  },

/store/loading/index.js

export const state = () => ({
  loading: false,
});

export const getters = {
  getLoadingState: (state) => state.loading,
};
export const mutations = {
  setLoading(state, payload) {
    state.loading = payload;
  },
};
export const actions = {
  toggleLoading({ commit }, payload) {
    commit("setLoading", payload);
  },
};

"dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/composition-api": "^0.32.0",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vuex-composition-helpers": "^1.1.0",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0"
  }

[vate]

Happening to me similarly:

As I see from the Vue 2.7 release blog post, the new version includes some backported features that make the use of @vue/composition-api obsolete. Indeed, in said plugin there is a new warning that states that "With the release of Vue 2.7, which has Composition API built-in, you no longer need this plugin".

vuex-composition-helpers uses @vue/composition-api. . I've tried to use it with version ^2.0.0 (@next), but anyway I get this same error as @rafaelmagalhaes, probably because it is intended to work with vue 3 and not vue 2.7.

[rafaelmagalhaes]

Happening to me similarly:

As I see from the Vue 2.7 release blog post, the new version includes some backported features that make the use of @vue/composition-api obsolete. Indeed, in said plugin there is a new warning that states that "With the release of Vue 2.7, which has Composition API built-in, you no longer need this plugin".

vuex-composition-helpers uses @vue/composition-api. . I've tried to use it with version ^2.0.0 (@next), but anyway I get this same error as @rafaelmagalhaes, probably because it is intended to work with vue 3 and not vue 2.7.

Thanks for this, I managed to get it working by downgrading these packages

  "vue": "2.6.14",
  "vue-template-compiler": "2.6.14",
  "vue-server-renderer": "2.6.14"

[vate]

Good to know! Let's hope for some changes or feedback regarding vue 2.7

[davidmeirlevy]

Hi!

Thanks for this issue! I thing the problem with Vue 2.7 is this breaking change:

If you were previously using @vue/composition-api, update imports from it to vue instead.

Probably will need to fix it on v1 version of the package.

[LeSuisse]

I opened a PR to support Vue 2.7 without breaking the compat with Vue 2.6 thanks to Vue-Demi, see #72

[davidmeirlevy]

fixed at version 1.2.0. notice that 1.1.1 supports vue up to 2.6.x