Merge pull request #632 from storyblok/fix/add-common-name-components…

…-dir

fix: Add common name "componentsDir" & document it

README.md

@@ -169,6 +169,29 @@ To link your Vue components to the equivalent one in your Storyblok space:
 
 - First, you need to load them globally adding them to the `~/storyblok` directory. It's important to name them with Pascal case in your code `ExampleComponent.vue` and with a hyphen inside your Storyblok space `example-component`, so they will be imported automatically.
 
+  If you want to define your own directory for the Storyblok related components, you can use the option `componentsDir` in the `nuxt.config.js`:
+
+  ```js
+  // nuxt.config.ts
+  modules: [
+    [
+      "@storyblok/nuxt",
+      {
+        accessToken: "<your-access-token>",
+        componentsDir: false,
+      }
+    ]
+  ],
+  components: {
+    dirs: [
+      {
+        path: '~/components/storyblok',
+        global: true,
+      }
+    ]
+  },
+  ```
+
   Otherwise, you can set another directory and load them manually (for example, by [using a Nuxt plugin](https://stackoverflow.com/questions/43040692/global-components-in-vue-nuxt)).
 
   > **Warning**

playground/nuxt.config.ts

@@ -7,8 +7,15 @@ export default defineNuxtConfig({
       region: ""
     },
     devtools: true,
+    // componentsDir: false,
     // enableSudoMode: true /* (or legacy) usePlugin: false */
   },
+  // components: {
+  //   dirs: [{
+  //     path: '~/components/storyblok',
+  //     global: true,
+  //   }]
+  // },
   app: {
     head: {
       script: [{ src: "https://cdn.tailwindcss.com" }]

src/module.ts

@@ -15,7 +15,7 @@ export interface ModuleOptions {
   bridge: boolean, // storyblok bridge on/off
   devtools: boolean, // enable nuxt/devtools integration
   apiOptions: any, // storyblok-js-client options
-  globalDir: string, // enable storyblok global directory for components
+  componentsDir: string, // enable storyblok global directory for components
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -29,7 +29,7 @@ export default defineNuxtModule<ModuleOptions>({
     usePlugin: true, // legacy opt. for enableSudoMode
     bridge: true,
     devtools: false,
-    globalDir: '~/storyblok',
+    componentsDir: '~/storyblok',
     apiOptions: {},
   },
   setup(options, nuxt) {
@@ -48,9 +48,8 @@ export default defineNuxtModule<ModuleOptions>({
 
 
     // Enable dirs
-    // nuxt.options.components.dirs = ["~/components/storyblok"];
-    if(options.globalDir){
-      addComponentsDir({ path: options.globalDir, global: true, pathPrefix: false });
+    if(options.componentsDir) {
+      addComponentsDir({ path: options.componentsDir, global: true, pathPrefix: false });
     }
     nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
     nuxt.options.build.transpile.push("@storyblok/nuxt");