feat(nuxt)!: rewrite nuxt module

packages/nuxt/build.config.ts

@@ -4,6 +4,6 @@ export default defineBuildConfig({
   declaration: true,
   emitCJS: false,
   cjsBridge: true,
-  entries: ['src/module', 'src/templates/plugin'],
+  entries: ['src/module', { input: 'src/runtime/', outDir: 'dist/runtime' }],
   externals: ['pinia', '@nuxt/kit-edge', '@nuxt/types'],
 })

packages/nuxt/package.json

@@ -35,26 +35,17 @@
   "types": "./dist/module.d.ts",
   "files": [
     "module.cjs",
-    "dist/*.js",
-    "dist/*.mjs",
-    "dist/*.d.ts"
+    "dist"
   ],
   "scripts": {
     "build": "unbuild",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . -l @pinia/nuxt -r 1"
   },
   "dependencies": {
-    "vue-demi": "*"
+    "@nuxt/kit": "latest",
+    "pinia": "^2.0.3"
   },
   "devDependencies": {
-    "@nuxt/types": "^2.15.8",
-    "pinia": "^2.0.0-0",
     "unbuild": "^0.5.11"
-  },
-  "peerDependencies": {
-    "pinia": "~2.0.3"
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

packages/nuxt/src/module.ts

@@ -1,11 +1,8 @@
-/**
- * @module @pinia/nuxt
- */
-// import { isVue2 } from 'vue-demi'
+import { name, version } from '../package.json'
+import { defineNuxtModule, addPlugin, isNuxt2 } from '@nuxt/kit'
 import type { Pinia } from 'pinia'
-import type { Context, Module } from '@nuxt/types'
 
-export interface PiniaNuxtOptions {
+export interface PiniaModuleOptions {
   /**
    * Pinia disables Vuex by default, set this option to `false` to avoid it and
    * use Pinia alongside Vuex.
@@ -15,56 +12,47 @@ export interface PiniaNuxtOptions {
   disableVuex?: boolean
 }
 
-const DEFAULTS = {
-  disableVuex: true,
-}
-
-export default <Module>function (_options) {
-  const nuxt = this.nuxt
-  const options = {
-    ...DEFAULTS,
-    ...(_options || {}),
-    ...(nuxt.options.pinia || {}),
-  }
-
-  // Disable default Vuex store (options.features only exists in Nuxt v2.10+)
-  if (nuxt.options.features && options.disableVuex) {
-    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'
-
-  this.addPlugin({ src: require.resolve('./plugin.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
-
-    /**
-     * Pinia instance attached to the app.
-     */
+export default defineNuxtModule({
+  name,
+  version,
+  configKey: 'pinia',
+  defaults: {
+    disableVuex: true,
+  } as PiniaModuleOptions,
+  setup(options, nuxt) {
+    // Disable default Vuex store for Nuxt 2 (options.features only exists in Nuxt v2.10+)
+    if (isNuxt2() && nuxt.options.features && options.disableVuex) {
+      nuxt.options.features.store = false
+    }
+
+    // Resolve pinia
+    // TODO: Use kit to use proper search path
+    nuxt.options.alias.pinia = require.resolve('pinia/dist/pinia.mjs')
+
+    // Register auto imports
+    nuxt.hook('autoImports:extend', (autoImports) => {
+      autoImports.push({
+        name: 'defineStore',
+        as: 'defineStore',
+        from: 'pinia',
+      })
+    })
+
+    // Add vue2 or vue3 plugin
+    addPlugin({
+      src: isNuxt2()
+        ? require.resolve('./runtime/plugin.vue2.mjs')
+        : require.resolve('./runtime/plugin.vue3.mjs'),
+    })
+  },
+})
+
+declare module '@nuxt/kit' {
+  export interface NuxtApp {
+    /** Pinia instance attached to the app.*/
     $pinia: Pinia
   }
-}
-
-declare module 'pinia' {
-  export interface PiniaCustomProperties {
-    /**
-     * Nuxt context.
-     */
-    $nuxt: Context
+  export interface NuxtConfig {
+    pinia: PiniaModuleOptions
   }
 }

packages/nuxt/src/runtime/plugin.vue2.mjs

@@ -0,0 +1,21 @@
+import { createPinia, setActivePinia, PiniaVuePlugin } from 'pinia'
+import Vue from 'vue'
+
+// @ts-ignore
+Vue.use(PiniaVuePlugin)
+
+export default function (context, inject) {
+  const pinia = createPinia()
+  context.app.pinia = pinia
+  inject('pinia', pinia)
+  setActivePinia(pinia)
+
+  // Hydrate state
+  if (process.server) {
+    context.beforeNuxtRender(({ nuxtState }) => {
+      nuxtState.pinia = pinia.state.value
+    })
+  } else if (context.nuxtState && context.nuxtState.pinia) {
+    pinia.state.value = context.nuxtState.pinia
+  }
+}

packages/nuxt/src/runtime/plugin.vue3.mjs

@@ -0,0 +1,17 @@
+import { defineNuxtPlugin } from '#app'
+import { createPinia, setActivePinia } from 'pinia'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const pinia = createPinia()
+  nuxtApp.vueApp.use(pinia)
+  nuxtApp.provide('pinia', pinia)
+  setActivePinia(pinia)
+
+  // Hydrate state
+  if (process.server) {
+    nuxtApp.payload.state.pinia = pinia.state.value
+  }
+  if (process.client && nuxtApp.payload.state.pinia) {
+    pinia.state.value = nuxtApp.payload.state.pinia
+  }
+})

packages/nuxt/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "types": ["@nuxt/kit"]
+}

tsconfig.json

@@ -3,7 +3,7 @@
     "packages/pinia/src/global.d.ts",
     "packages/*/src/**/*.ts",
     "packages/*/__tests__/**/*.ts"
-  ],
+, "packages/nuxt/src/runtime/plugin.vue3.mjs", "packages/nuxt/src/runtime/plugin.vue2.mjs"  ],
   "exclude": ["packages/test-vue-2", "packages/pinia/__tests__/test-utils.ts"],
   "compilerOptions": {
     "baseUrl": ".",