v6.12 - Adding plugins / content locations in Nuxt Layer

[JohnCampionJr]

Hi again, similar question as my earlier issue about Nuxt Modules, but this time in nuxt layers.

My repo is here:
https://github.com/jcamp-code/formkit-shuriken-ui/tree/nuxttw612

I currently have this is a nuxt layer that contains components for my apps:
nuxt.config.ts

import { createResolver } from '@nuxt/kit'

import formkitPlugin from '@formkit/themes/tailwindcss'

const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
  extends: ['@shuriken-ui/nuxt'],
  modules: ['@formkit/nuxt', 'nuxt-icon-tw'],
  tailwindcss: {
    config: {
      content: [
        resolve('./formkit/**/*.{js,vue,ts}'),
        resolve('./components/*.vue'),
      ],
      plugins: [formkitPlugin],
    },
  },
})

What is the best way to do this with the new 6.12 changes? Its not a module, so I don't have access to nuxt/kit here.

Currently this config is merged by Nuxt with the other layers in the app.

I looked at this sample in the PR you're working on but the layer tailwind config is super simple.
https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/nuxt-layers?file=nuxt.config.ts

Thanks again for any help.

[JohnCampionJr]

I've actually tried just removing the tailwind config to start building it up again and no matter what I do, I get

Pre-transform error: [postcss] Cannot read properties of null (reading '__isOptionsFunction') (x10)    

This layer does use the module you helped me fix in case that's relevant

[JohnCampionJr]

I'm going to close this for now, the issue lies upstream in https://github.com/shuriken-ui/nuxt which would need to be updated.

I really think this 6.12 should have carried a 7.0 release number as it is very breaking to all but the simplest configs it seems.

[ineshbose]

For a layer all you really need to do is add a tailwind.config file for the project with that plugin - does that not work?

I really think this 6.12 should have carried a 7.0 release number as it is very breaking to all but the simplest configs it seems.

I see your reasoning and I considered the same. The changes carried out however should not break existing functionality, but it also won't enable to the newest feature in 6.12 (which is HMR support). Moreover, there are plans for v7 (#790) and I'm worried that if this were to be a major release, we'd be looking at multiple major releases in a shortspan possibly (because as of v6, we have Nuxt 2 support as well, and we're also going to have to support Tailwind 4 at a point). Again, existing behaviour shouldn't break - if it is, happy to investigate and provide a fix.

[JohnCampionJr]

I think it would've been wise to just save it for v7 then. To say its non-breaking when it really is breaking is not correct.

So far I've had to rework every use of this module. Such that, I'm leaving everything at 6.11.4 for now.

Maybe the 6.12.1 release will fix things but as it is now, when it encounters something like this plugin, it is hard crashing for me. Not just displaying the notice.

https://github.com/shuriken-ui/nuxt/blob/main/nuxt.config.ts

For this, I'm at the mercy of the upstream release which uses this in nuxt.config.js:

    'tailwindcss:config'(config: Config) {
      withShurikenUI(config)
    },

That doesn't work anymore and is a breaking change.

[ineshbose]

I think it would've been wise to just save it for v7 then.

v7 is planned to drop support for Nuxt 2, so instant HMR would not be available for developers using the module with Nuxt 2.

6.12.0 in a way fixes the way this module reads configs (as far as I can think), and I've only been as a maintainer recently, but my aim to keep developers satisfied and pleased.

Again, your project shouldn't crash so perhaps nightly build currently has safer checks for your use, but I mentioned earlier about the layer moving the configuration to an external tailwind.config directly - does that not help?

[ineshbose]

Also happy to create PRs to update any modules/layers - the changes should just be direct and simple. 🙂
shuriken-ui/nuxt#123

[JohnCampionJr]

Appreciate your help :)