Nuxt Layers and FormKit theme

[Martin Masevski]

Reproduction

https://github.com/Archetipo95/test-formkit-theme

Describe the bug

I'm trying to use Nuxt Layers feature (https://nuxt.com/docs/getting-started/layers) with FormKit, but it seams that the theme is not working.
I made a repo for reproduction (https://github.com/Archetipo95/test-formkit-theme), I started from official Nuxt Layer starter (https://github.com/nuxt/starter/tree/layer).

I tried without layer configuration and the theme is working as expected.

To start the repo use pnpm i and pnpm dev

If you want to try with normal configuration without the nuxt layer:
1- change tsconfig.json to "extends": "./.nuxt/tsconfig.json"
2- use the command pnpm nuxt dev

This is the conversation I had on the support forum with @fenilli https://discord.com/channels/793529058377072650/1220439418943311912

Environment

MacOs

[Pradyumna]

Part of the issue is that dependencies of the layers are not automatically installed in the extended nuxt installation.

nuxt/nuxt#13367 (comment)
unjs/c12#51

Another part of the issue is that content files in tailwind.config.js are relative to the root directory of the extended nuxt installation not the layer. Hence the join in layer nuxt.config.js for CSS file.

https://codesandbox.io/p/devbox/bold-cdn-ddcyqc

[Martin Masevski]

Thanks for the info about the issues. I'm not getting your proposed solution, did you just duplicate your code from the base layer?

[Martin Masevski]

Also this could be linked to our issue: nuxt-modules/tailwindcss#826

[Pradyumna]

• Duplicated formkit.config.ts formkit.theme.ts
• Installed and registered @formkit/nuxt module in playground.

[Martin Masevski]

I guess I found that a good solution is just putting configFile: join(currentDir, './formkit.config.ts'), in the nuxt.config under FormKit settings.
I don't know why but it's working. I updated the reproduction code so you can check it.
I will leave this issue open for now, I anyone from the FormKit team wants to check what's going on.

[Gustavo Fenilli]

The way the nuxt module works is by looking into resolved path of the nuxt.options.rootDir + options.configFile || 'formkit.config' I would guess using nuxt layers this would make nuxt.options.rootDir as the extension path, not the layer path, by adding a configFile with currentDir it probably resolves correctly.