Error when try to use Pinia's module inside Nuxt plugin

[Kozioleczek]

Problem

I have been trying to run module action to verify if user is logged in by just checking local storage to find bearer token. The thing is that beside of properly pass $pinia from plugin context into modules argument (as it is said in pinia's docs) I receive below error:

I defined in nuxt.config.js that this initial-auth plugin should be executed only on client-side

Code

export default defineNuxtPlugin(({ $pinia }) => {
  const authStore = useAuthStore($pinia)
  const local = browserStorageSvg.readSessionStorage<AuthResponse>('authTokens')
  const session = browserStorageSvg.readLocalStorage<AuthResponse>('authTokens')
  if (local !== null) {
    authStore.isUserLogged = true
    authStore.authTokens = local
  }
  if (session !== null) {
    authStore.isUserLogged = true
    authStore.authTokens = session
  }
  if (local === null && session === null) {
    authStore.isUserLogged = false
    authStore.authTokens = null
  }
})

Package.json

  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/composition-api": "^0.23.2",
    "@nuxtjs/proxy": "^2.1.0",
    "@vueform/multiselect": "^1.4.0",
    "core-js": "^3.9.1",
    "debounce": "^1.2.1",
    "luxon": "^1.26.0",
    "nuxt": "^2.15.3",
    "pinia": "^0.3.1",
    "portal-vue": "^2.1.7",
    "v-calendar": "^2.3.0",
    "vue-fragment": "^1.5.2",
    "vue-slick-carousel": "^1.0.6",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/tailwindcss": "^4.0.3",
    "@types/debounce": "^1.2.0",
    "@types/luxon": "^1.26.4",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "fibers": "^5.0.0",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.4",
    "postcss": "^8.2.8",
    "prettier": "^2.2.1",
    "sass": "^1.32.11",
    "sass-loader": "10"
  }

[posva]

have you checked https://github.com/posva/pinia-example-nuxt for an example?

[posva]

It looks to me like your module is installed before pinia's (https://github.com/posva/pinia-example-nuxt/blob/master/nuxt.config.js#L31)

[Kozioleczek]

Hey, well adding transpile: ['pinia'] and { disableVuex: true } param into buildModules declaration of pinia/nuxt solved problem. Thank you for help. BTW You did great job with whole Pinia project. I'm using it since Vue 3.0 beta.

[posva]

Thanks, I'm glad you enjoy Pinia!
I think the problem you are seeing is due to a newer version of nuxt composition API. I will have to update the example and probably publish a patch for pinia so the transpile option is added automatically (as it used to be)

[posva]

Apparently, you also need to add @vue/composition-api to transpile now because it's no longer done by composition API. Pinia will add itself if you add it. I did a test locally without pinia nor @vue/composition API in the transpile option and it works too

[Kozioleczek]

You mean @nuxtjs/composition-api? :D

[posva]

No, that wasn't a typo! (@nuxtjs/composition-api relies on it)

[posva]

The updated documentation is now live: https://pinia.esm.dev/ssr/nuxt.html

I also added a link to https://composition-api.nuxtjs.org/getting-started/setup/#quick-start as it could change in the future 🙂