Skip to content

Nuxt

Use the UITheme module in a Nuxt 4 application.

Install

The module supports Nuxt 4. The CLI rejects Nuxt 3 automatic setup before changing files.

npm install uitheme-web@latest

Register the module

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['uitheme-web/nuxt'],
  uiTheme: {
    defaultTheme: 'system',
    colorThemes: ['default', 'caffeine'],
  },
});

The module supplies the theme integration. Keep palette styles in your application CSS. Do not add a second app-wide plugin or provider around the module's setup.

Use theme state

Use useUITheme from uitheme-web/vue in a component's setup. The Vue composable example also applies to Nuxt.

Use a fresh state for each server request. Check the initial appearance before hydration and the saved preference after reload. Keep the registered palette keys consistent with your CSS.

Install controls

With Tailwind configured, preview the changes before applying them:

npx uitheme-cli init --dry-run
npx uitheme-cli init
npx uitheme-cli add theme-toggle theme-selector color-theme-selector --base reka

Keep controls under the app's configured component alias. Nuxt 4 normally places application code under app/.

Example

Open the Nuxt example. Review nuxt.config.ts and the shared Vue screens.