feat!(nuxt): upgrade nuxt module

.npmrc

@@ -1 +1,2 @@
 shamefully-hoist=true
+strict-peer-dependencies=false

packages/docs/ssr/nuxt.md

@@ -1,15 +1,13 @@
 # Nuxt.js
 
-Using Pinia with [Nuxt.js](https://nuxtjs.org/) is easier since Nuxt takes care of a lot of things when it comes to _server side rendering_. For instance, **you don't need to care about serialization nor XSS attacks**.
+Using Pinia with [Nuxt.js](https://nuxtjs.org/) is easier since Nuxt takes care of a lot of things when it comes to _server side rendering_. For instance, **you don't need to care about serialization nor XSS attacks**. Pinia supports Nuxt Bridge and Nuxt 3, for bare Nuxt 2 support, [See below](#nuxt-2-without-bridge).
 
 ## Installation
 
-Make sure to install [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/) alongside `pinia`:
-
 ```bash
-yarn add pinia @pinia/nuxt @nuxtjs/composition-api
+yarn add @pinia/nuxt
 # or with npm
-npm install pinia @pinia/nuxt @nuxtjs/composition-api
+npm install @pinia/nuxt
 ```
 
 We supply a _module_ to handle everything for you, you only need to add it to `buildModules` in your `nuxt.config.js` file:
@@ -19,9 +17,7 @@ We supply a _module_ to handle everything for you, you only need to add it to `b
 export default {
   // ... other options
   buildModules: [
-    // Nuxt 2 only:
-    // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
-    '@nuxtjs/composition-api/module',
+    // ...
     '@pinia/nuxt',
   ],
 }
@@ -43,37 +39,28 @@ export default {
 }
 ```
 
-## Using the Nuxt context in stores
+## Auto imports
 
-You can also use [the context](https://nuxtjs.org/docs/2.x/internals-glossary/context) in any store by using the injected property `$nuxt`:
-
-```js
-import { useUserStore } from '~/stores/userStore'
-
-defineStore('cart', {
-  actions: {
-    purchase() {
-      const user = useUserStore()
-      if (!user.isAuthenticated()) {
-        this.$nuxt.redirect('/login')
-      }
-    },
-  },
-})
-```
-
-## Using Pinia alongside Vuex
-
-It is recommended to **avoid using both Pinia and Vuex** but if you need to use both, you need to tell pinia to not disable it:
+By default `@pinia/nuxt` exposes one single auto import: `usePinia()`, which is similar to `getActivePinia()` but works better with Nuxt. You can add auto imports to make your life easier:
 
 ```js
 // nuxt.config.js
 export default {
+  // ... other options
   buildModules: [
-    '@nuxtjs/composition-api/module',
-    ['@pinia/nuxt', { disableVuex: false }],
+    // ...
+    [
+      '@pinia/nuxt',
+      {
+        autoImports: [
+          // automatically imports `usePinia()`
+          'defineStore',
+          // automatically imports `usePinia()` as `usePiniaStore()`
+          ['defineStore', 'definePiniaStore'],
+        ],
+      },
+    ],
   ],
-  // ... other options
 }
 ```
 
@@ -91,3 +78,43 @@ If you are using TypeScript or have a `jsconfig.json`, you should also add the t
 ```
 
 This will also ensure you have autocompletion 😉 .
+
+## Nuxt 2 without bridge
+
+Pinia supports Nuxt 2 until `@pinia/nuxt` v0.2.1. Make sure to also install [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/) alongside `pinia`:
+
+```bash
+yarn add pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api
+# or with npm
+npm install pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api
+```
+
+We supply a _module_ to handle everything for you, you only need to add it to `buildModules` in your `nuxt.config.js` file:
+
+```js
+// nuxt.config.js
+export default {
+  // ... other options
+  buildModules: [
+    // Nuxt 2 only:
+    // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
+    '@nuxtjs/composition-api/module',
+    '@pinia/nuxt',
+  ],
+}
+```
+
+### Using Pinia alongside Vuex
+
+It is recommended to **avoid using both Pinia and Vuex** but if you need to use both, you need to tell pinia to not disable it:
+
+```js
+// nuxt.config.js
+export default {
+  buildModules: [
+    '@nuxtjs/composition-api/module',
+    ['@pinia/nuxt', { disableVuex: false }],
+  ],
+  // ... other options
+}
+```

packages/nuxt/.gitignore

@@ -0,0 +1,2 @@
+.nuxt
+.output

packages/nuxt/package.json

@@ -24,35 +24,35 @@
     "email": "posva13@gmail.com"
   },
   "sideEffects": false,
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/module.mjs",
-      "require": "./module.cjs"
-    },
-    "./dist/*": "./dist/*"
+      "require": "./dist/module.cjs"
+    }
   },
-  "main": "./module.cjs",
-  "types": "./dist/module.d.ts",
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
   "files": [
-    "module.cjs",
-    "dist/*.js",
-    "dist/*.mjs",
-    "dist/*.d.ts"
+    "dist"
   ],
   "scripts": {
-    "build": "unbuild",
+    "build": "pnpm dev:prepare && nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "test:types": "pnpm dev:prepare && nuxi typecheck",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . -l @pinia/nuxt -r 1"
   },
   "dependencies": {
-    "vue-demi": "*"
+    "@nuxt/kit": "^3.0.0-rc.4",
+    "pinia": ">=2.0.14"
   },
   "devDependencies": {
-    "@nuxt/types": "^2.15.8",
-    "pinia": "^2.0.0",
-    "unbuild": "^0.7.4"
-  },
-  "peerDependencies": {
-    "pinia": ">=2.0.16"
+    "@nuxt/module-builder": "latest",
+    "nuxt": "^3.0.0-rc.4",
+    "typescript": "^4.6.3",
+    "vue-tsc": "^0.38.3"
   },
   "publishConfig": {
     "access": "public"

packages/nuxt/playground/app.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+const counter = useCounter()
+
+if (process.server) {
+  counter.increment()
+}
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ counter.$state.count }}</p>
+    <button @click="counter.increment()">+</button>
+  </div>
+</template>

packages/nuxt/playground/composables/counter.ts

@@ -0,0 +1,13 @@
+export const useCounter = definePiniaStore('counter', {
+  state: () => ({
+    count: 100,
+  }),
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+  getters: {
+    getCount: (state) => state.count,
+  },
+})

packages/nuxt/playground/nuxt.config.ts

@@ -0,0 +1,6 @@
+import { defineNuxtConfig } from 'nuxt'
+import piniaModule from '../src/module'
+
+export default defineNuxtConfig({
+  modules: [piniaModule],
+})

packages/nuxt/playground/package.json

@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "pinia-nuxt-playground"
+}

packages/nuxt/shims.d.ts

@@ -0,0 +1,5 @@
+declare namespace NodeJS {
+  export interface Process {
+      server: boolean
+  }
+}

packages/nuxt/src/module.ts

@@ -1,70 +1,83 @@
 /**
  * @module @pinia/nuxt
  */
-// import { isVue2 } from 'vue-demi'
-import type { Pinia } from 'pinia'
-import type { Context, Module } from '@nuxt/types'
+import {
+  defineNuxtModule,
+  addPlugin,
+  isNuxt2,
+  addAutoImport,
+  createResolver,
+} from '@nuxt/kit'
 
-export interface PiniaNuxtOptions {
+export interface ModuleOptions {
   /**
    * Pinia disables Vuex by default, set this option to `false` to avoid it and
-   * use Pinia alongside Vuex.
+   * use Pinia alongside Vuex (Nuxt 2 only)
    *
    * @default `true`
    */
   disableVuex?: boolean
-}
 
-const DEFAULTS = {
-  disableVuex: true,
+  /**
+   * Array of auto imports to be added to the nuxt.config.js file.
+   *
+   * @example
+   * ```js
+   * autoImports: [
+   *  // automatically import `defineStore`
+   *  'defineStore',
+   *  // automatically import `defineStore` as `definePiniaStore`
+   *  ['defineStore', 'definePiniaStore',
+   * ]
+   * ```
+   *
+   */
+  autoImports?: Array<string | [string, string]>
 }
 
-export default <Module>function (_options) {
-  const nuxt = this.nuxt
-  const options = {
-    ...DEFAULTS,
-    ...(_options || {}),
-    ...(nuxt.options.pinia || {}),
-  }
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'pinia',
+    configKey: 'pinia',
+    compatibility: {
+      nuxt: '^2.0.0 || ^3.0.0',
+      bridge: true,
+    },
+  },
+  defaults: {
+    disableVuex: true,
+    autoImports: [],
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url)
 
-  // Disable default Vuex store (options.features only exists in Nuxt v2.10+)
-  if (nuxt.options.features && options.disableVuex) {
-    nuxt.options.features.store = false
-  }
+    // Disable default Vuex store (Nuxt v2.10+ only)
+    if (nuxt.options.features && options.disableVuex && isNuxt2()) {
+      nuxt.options.features.store = false
+    }
 
-  // make sure we use the mjs for pinia so node doesn't complain about using a module js with an extension that is js
-  // but doesn't have the type: module in its packages.json file
-  nuxt.options.alias.pinia = 'pinia/dist/pinia.mjs'
+    // Transpile runtime
+    nuxt.options.build.transpile.push(resolver.resolve('./runtime'))
 
-  this.addPlugin({ src: require.resolve('./plugin.mjs') })
+    // Make sure we use the mjs build for pinia
+    nuxt.options.alias.pinia = 'pinia/dist/pinia.mjs'
 
-  // transpile pinia for nuxt 2 and nuxt bridge
-  // if (isVue2 && !nuxt.options.build.transpile.includes('pinia')) {
-  //   nuxt.options.build.transpile.push('pinia')
-  // }
-}
-
-declare module '@nuxt/types' {
-  export interface Context {
-    /**
-     * Pinia instance attached to the app.
-     *
-     * @deprecated: use context.$pinia instead
-     */
-    pinia: Pinia
+    // Add runtime plugin
+    if (isNuxt2()) {
+      addPlugin(resolver.resolve('./runtime/plugin.vue2'))
+    } else {
+      addPlugin(resolver.resolve('./runtime/plugin.vue3'))
+    }
 
-    /**
-     * Pinia instance attached to the app.
-     */
-    $pinia: Pinia
-  }
-}
-
-declare module 'pinia' {
-  export interface PiniaCustomProperties {
-    /**
-     * Nuxt context.
-     */
-    $nuxt: Context
-  }
-}
+    // Add auto imports
+    const composables = resolver.resolve('./runtime/composables')
+    addAutoImport([
+      { from: composables, name: 'usePinia' },
+      ...options.autoImports.map((imports) =>
+        typeof imports === 'string'
+          ? { from: composables, name: imports }
+          : { from: composables, name: imports[0], as: imports[1] }
+      ),
+    ])
+  },
+})

packages/nuxt/src/runtime/composables.ts

@@ -0,0 +1,4 @@
+import { useNuxtApp } from '#imports'
+export * from 'pinia'
+
+export const usePinia = () => useNuxtApp().$pinia