nuxt-css-layer

This is a Nuxt module that can be used to control CSS layers.

Only support Vite mode currently.

features

• Declare CSS @layer at top of HTML head
• Wrap .vue style sections in CSS layer (Using unplugin-vue-style-layer)

Usage

Install it.

# npm
npm add -D nuxt-css-layer

# yarn
yarn add --dev nuxt-css-layer

# pnpm
pnpm add -D nuxt-css-layer

Then, setup module in nuxt.config

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    "nuxt-css-layer",
  ],
  cssLayer: {
    order: ["components", "uno"]
  }
})

Will insert the style tag in html head:

<style>
@layer components, uno;
</style>

You can also customize component layer. Check unplugin-vue-style-layer for more usages.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    "nuxt-css-layer",
  ],
  cssLayer: {
    order: ["components", "uno"],
    componentLayer: "components", // default. inject 
    injectOrder: true // inject order declaration to component styles, default is `false`
  }
})

License

MIT.