feat(nuxt): automatically register stores dir in all layers

Author: OsamaHaikal

packages/nuxt/__tests__/nuxt.spec.ts

@@ -32,5 +32,6 @@ describe('works with nuxt', async () => {
   it('works on ssr', async () => {
     const html = await $fetch('/')
     expect(html).toContain('Count: 101')
+    expect(html).toContain('Layer: store state')
   })
 })

packages/nuxt/example-layer/nuxt.config.ts

@@ -0,0 +1,11 @@
+import { fileURLToPath } from 'node:url'
+import { defineNuxtConfig } from 'nuxt/config'
+import { dirname, join } from 'path'
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+export default defineNuxtConfig({
+  pinia: {
+    storesDirs: [join(currentDir, './stores/**')],
+  },
+})

packages/nuxt/example-layer/stores/layerStore.ts

@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+
+export const useLayerStore = defineStore('layerStore', () => {
+  console.log('I was defined within a stores directory in example-layer')
+  const state = ref('store state')
+  return {
+    state,
+  }
+})

packages/nuxt/playground/app.vue

@@ -6,6 +6,7 @@ const counter = useCounter()
 useTestStore()
 useSomeStoreStore()
 
+const layerStore = useLayerStore()
 // await useAsyncData('counter', () => counter.asyncIncrement().then(() => true))
 
 if (import.meta.server) {
@@ -17,5 +18,7 @@ if (import.meta.server) {
   <div>
     <p>Count: {{ counter.$state.count }}</p>
     <button @click="counter.increment()">+</button>
+
+    <p>Layer: {{ layerStore.state }}</p>
   </div>
 </template>

packages/nuxt/playground/nuxt.config.ts

@@ -8,6 +8,8 @@ export default defineNuxtConfig({
   },
   modules: [piniaModule],
 
+  extends: ['../example-layer'],
+
   pinia: {
     storesDirs: ['./stores/**', './domain/*/stores'],
   },

packages/nuxt/src/module.ts

@@ -91,9 +91,12 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
       { from: composables, name: 'storeToRefs' },
     ])
 
-    if (!options.storesDirs) {
-      // resolve it against the src dir which is the root by default
-      options.storesDirs = [resolver.resolve(nuxt.options.srcDir, 'stores')]
+    if (options.storesDirs == null) {
+      // Add stores directory for each layer, including the main src dir
+      options.storesDirs = []
+      for (const layer of nuxt.options._layers) {
+        options.storesDirs.push(resolver.resolve(layer.config.srcDir, 'stores'))
+      }
     }
 
     if (options.storesDirs) {