fix(nuxt): inject pinia after installing the plugin

diff --git a/packages/nuxt/templates/plugin.js b/packages/nuxt/templates/plugin.js
index 150812d9b5841333642d6b4465f1c1c72c227f96..d411db99c802ea5bba6920d74e90adca76c83ebd 100644 (file)
--- a/packages/nuxt/templates/plugin.js
+++ b/packages/nuxt/templates/plugin.js
@@ -11,19 +11,21 @@ if (isVue2) {
  */
 const PiniaNuxtPlugin = (context, inject) => {
   const pinia = createPinia()
-  // add $pinia to the context
-  inject('pinia', pinia)
-  // to allow accessing pinia without the $
-  context.pinia = pinia
-
   if (isVue2) {
     // simulate new Vue({ pinia })
     context.app.pinia = pinia
   } else {
-    // TODO: does this work?
     context.app.use(pinia)
   }
 
+  // make sure to inject pinia after installing the plugin because in Nuxt 3, inject defines a non configurable getter
+  // on app.config.globalProperties
+  // add $pinia to the context
+  inject('pinia', pinia)
+  // to allow accessing pinia without the $
+  // TODO: remove this in deprecation
+  context.pinia = pinia
+
   setActivePinia(pinia)
 
   // add access to `$nuxt`