Nuxt configuration is not working for Nuxt2.x (Cannot find module '#app')

[OleMariusKohmann]

Says in documentation that plugin works in Nuxt 2, but example in documentation is not working.

`TS2307: Cannot find module '#app' or its corresponding type declarations. 1 | import { createNuxtPersistedState } from 'pinia-plugin-persistedstate'

2 | import { defineNuxtPlugin, useCookie } from '#app' | ^^^^^^ 3 | 4 | export default defineNuxtPlugin(nuxtApp => { 5 | nuxtApp.$pinia.use(createNuxtPersistedState(useCookie))`

Removing this line and trying to do correct import statements, will lead to errors for useCookie(not found)

[prazdevs]

Hey :)

useCookie is a nuxt3 specific composable, and so is the createNuxtPersistedState factory.

You can use it with nuxt2 by making it a client side only plugin. I don't know much about cookies on nuxt2 though.

[larenelg]

I'm not sure about Cookies, but I hope this helps for Nuxt 2:

plugins/persistedStatePlugin.js

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const persistedStatePlugin = ({ $pinia }) => {
  $pinia.use(piniaPluginPersistedstate)
}

export default persistedStatePlugin

nuxt.config.js

  plugins: [
    '~/plugins/persistedStatePlugin.js'
  ],

[prazdevs]

given the example above, i'll close this for now, feel free to reopen if you need further info :)

[OleMariusKohmann]

I'm not sure about Cookies, but I hope this helps for Nuxt 2:

plugins/persistedStatePlugin.js

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const persistedStatePlugin = ({ $pinia }) => {
  $pinia.use(piniaPluginPersistedstate)
}

export default persistedStatePlugin

nuxt.config.js

  plugins: [
    '~/plugins/persistedStatePlugin.js'
  ],

Added this to the project and the following error occurs when accessing app on localhost after npm run dev:

 ERROR  localStorage is not defined                                                                                                                                                       16:33:45  

  at node_modules\pinia-plugin-persistedstate\dist\index.js:86:17
  at node_modules\pinia\dist\pinia.cjs:1590:43
  at EffectScopeImpl.run (node_modules\@vue\composition-api\dist\vue-composition-api.common.js:110:24)
  at node_modules\pinia\dist\pinia.cjs:1590:33
  at Array.forEach (<anonymous>)
  at createSetupStore (node_modules\pinia\dist\pinia.cjs:1577:14)
  at createOptionsStore (node_modules\pinia\dist\pinia.cjs:1168:13)
  at useStore (node_modules\pinia\dist\pinia.cjs:1654:17)
  at asyncData (node_modules/vue-loader/lib/index.js:85:0)
  at promisify (.nuxt/utils.js:314:0)
  at server.js:4105:82
  at Array.map (<anonymous>)
  at module.exports../.nuxt/server.js.__webpack_exports__.default (.nuxt/server.js:245:0)

[prazdevs]

name your file plugins/persistedStatePlugin.client.js to make it clientside only, that way it won't try to access to localStorage while server side rendering