nuxt-ui-colors-no-inline

nuxt-ui-colors-no-inline

Nuxt module that ensures nuxt-ui-colors CSS generated by Nuxt UI respects the Nuxt inlineStyles feature when disabled.

[!NOTE] This module works only with inlineStyles: false feature in your Nuxt config. Without this setting, it defers to Nuxt UI's default behavior.

Quick setup

1. Add nuxt-ui-colors-no-inline dependency to your project

# Using pnpm
pnpm add -D nuxt-ui-colors-no-inline

# Using yarn
yarn add --dev nuxt-ui-colors-no-inline

# Using npm
npm install --save-dev nuxt-ui-colors-no-inline

2. Add the module in your nuxt.config.ts after @nuxt/ui:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    'nuxt-ui-colors-no-inline'
  ],
  features: {
    inlineStyles: false
  },
})

Options

This module augments the ui module options in nuxt.config.ts with a new colors property for static color customization, instead of using app.config.ts.

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    'nuxt-ui-colors-no-inline'
  ],
  features: {
    inlineStyles: false
  },
  ui: {
    // '@nuxt/ui' module options
    colorMode: true,
    fonts: true,
    // ...
    // 'nuxt-ui-colors-no-inline' module options
    colors: {
      neutral: "zinc",
      primary: "emerald",
      secondary: "violet",
      error: "red"
    }
  }
})

Why?

By default, Nuxt UI uses a colors plugin to inject a <style id="nuxt-ui-colors"> tag in the <head> of your pages, even when inlineStyles feature is disabled.

If you're particular about clean HTML with no inline styles, this module is for you. It removes Nuxt UI's colors plugin and generates a separate CSS file that is included in your app's main CSS entry instead, fully respecting the inlineStyles feature config.

Caveats

• Since CSS is generated at build time into a static file, you can no longer dynamically update colors at runtime by targeting #nuxt-ui-colors. To change colors dynamically, you must manually inject a new <style> tag into <head> with the updated CSS variables.
• In development, the separate CSS file is always generated since inlineStyles is disabled by default in dev mode. In production, it is only generated when inlineStyles: false is set in your Nuxt config.
• Color customization must be defined statically via the augmented colors property under ui in nuxt.config.ts, since the CSS is generated at build time and cannot pick up runtime app.config.ts changes.
• Color changes require a dev server restart to take effect. If you frequently tweak colors during development, consider temporarily removing this module from your Nuxt config.

Credits

• Nuxt
• Nuxt UI

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release