Components directory not found

[fhuesig]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @storyblok/nuxt@4.0.1 for the project I'm working on.

My issue was a warning in the build process, that the provided components directory was not found

 WARN  Components directory not found: /Users/**/storyblok

The module only resolves the storyblok components folder inside root source folder. I created a config entry in the nuxt config to set a custom components dir. The Patch is seen below and I added this to my nuxt.config

  storyblok: {
    dir: "~/vue/components",
  },

Here is the diff that solved my problem:

diff --git a/node_modules/@storyblok/nuxt/src/module.js b/node_modules/@storyblok/nuxt/src/module.js
index 5a0e667..7e3ebd8 100644
--- a/node_modules/@storyblok/nuxt/src/module.js
+++ b/node_modules/@storyblok/nuxt/src/module.js
@@ -25,7 +25,8 @@ export default defineNuxtModule({

     // Enable dirs
     // nuxt.options.components.dirs = ["~/components/storyblok"];
-    addComponentsDir({ path: "~/storyblok", global: true, pathPrefix: false });
+    nuxt.options.storyblok.dir = nuxt.options.storyblok.dir || "~/storyblok";
+    addComponentsDir({ path: nuxt.options.storyblok.dir, global: true, pathPrefix: true });

     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
     nuxt.options.build.transpile.push(runtimeDir);

This issue body was partially generated by patch-package.

[manuelschroederdev]

Hey there! 🙂

Thank you very much for your feedback and the suggestion regarding the components directory. Alex and I are certainly considering adding this option in the future. However, for the time being, the current way (using a storyblok folder at the root level of your project) is set up on purpose because Nuxt 3 might silently fail otherwise.

That's why right now we recommend to add all of your Storyblok components (or blocks) to the designated storyblok folder and all other components to the components folder.

[jony1993]

Hi @manuelschroederdev 👋 I also wanted to start migrating everything to nuxt3 and came across this issue. Might it still fail in nuxt3 also with the stable version?

If you have a lot components, it does not feel right to have to move some storyblok related components to another directory...

[Hironogawa]

Hello, I'm from the future and Nuxt 3 with Storyblok is now running fine from the components folder only. The storyblok folder is creating an unnecessary extra step and it would be nice to disable it or at least disable the warnings.

Thank you!

[MaelAbgrall]

following up on this

Would it be possible to have Blok that are taken regardless of their folder?

Aka, I have a call to action button saved in /components/Shared/Btn/CTA.vue Nuxt automatically pick it up in the code when I have a component <SharedBtnCTA />

Being able in Storyblok to say a blok technical name is SharedBtnCTA and have it use the same component would be amazing, especially in larger projects with tons of components

[Hironogawa]

following up on this

Would it be possible to have Blok that are taken regardless of their folder?

Aka, I have a call to action button saved in /components/Shared/Btn/CTA.vue Nuxt automatically pick it up in the code when I have a component <SharedBtnCTA />

Being able in Storyblok to say a blok technical name is SharedBtnCTA and have it use the same component would be amazing, especially in larger projects with tons of components

This is how I use it, get the component by path and component name. If you named it like that in Storyblok, Nuxt3 automatically finds the right component.

[MaelAbgrall]

Thanks!

I'll have a try whenever I have the time. The last time I tried, it didn't work though. Is there any specific configuration to do? (or maybe I was just too impatient to wait for an update on the bloks from Storyblok)

[Hironogawa]

Thanks!

I'll have a try whenever I have the time. The last time I tried, it didn't work though. Is there any specific configuration to do? (or maybe I was just too impatient to wait for an update on the bloks from Storyblok)

1. Get the latest Nuxt 3 and @storyblok/nuxt version. (Also check the npm lock files, could be locked on an older version.)
2. Set your components settings in your config:
   export default defineNuxtConfig({ … components: { global: true, dirs: ["~/components"], }, … });

Should also work with the "storyblok" folder if defined, I guess. But I like to keep my components in the "components" folder.