Nuxt

@theme-kit/nuxt

Nuxt 3ModuleSSRZero-flash6 exports

Nuxt 3 module: SSR-first theming, zero-flash bootstrap, cookie + localStorage sync, config-driven transitions and scrollbar.

Installation

View on npm ↗Source ↗

Install the integration alongside @theme-kit/core.

bash

pnpm add @theme-kit/nuxt

Quick Start

Complete copy-paste usage for this package.

nuxt.config.ts

1// nuxt.config.ts
2export default defineNuxtConfig({
3  modules: ["@theme-kit/nuxt"],
4  themeKit: {
5    themes,
6    defaultTheme: "mint-light",
7    initialMode: "system",
8    transition: { duration: 360, easing: "cubic-bezier(0.4, 0, 0.2, 1)" },
9    scrollbar: true,
10  },
11});

More Examples

Additional patterns for Nuxt.

ThemeSwitcher.vue

vue

1<script setup>
2// useTheme, useThemeMode, useThemeFamily are auto-imported by the module
3const { theme, mode, setMode, toggleTheme } = useTheme();
4</script>
5
6<template>
7  <div>
8    <span>{{ theme.name }} | {{ mode }}</span>
9    <button @click="toggleTheme">Toggle</button>
10    <button @click="setMode('light')">Light</button>
11    <button @click="setMode('dark')">Dark</button>
12    <button @click="setMode('system')">System</button>
13  </div>
14</template>

API Reference

Curated highlights below. The complete generated reference — every signature, parameter and type — is at /api-reference/nuxt.

Server

Export	Description
`SSR-first resolution`	Reads `theme-name`, `theme-mode`, `theme-family`, `theme-fingerprint` cookies, validates the fingerprint and resolves the initial theme before hydration.
`Themed <html> + bootstrap`	Renders `<html data-theme>` with inline CSS variables and a blocking bootstrap script in `<head>` for zero flash.
`Dark-mode CSS fallback`	Emits `@media (prefers-color-scheme: dark)` styles when the persisted mode is `system`.

Client

Export	Description
`Runtime plugin`	One app-wide runtime installed by the module and provided to every auto-imported composable.
`Cookie + localStorage sync`	Selection mirrors to cookies so the server renders the right theme on the next request.
`ThemeScope / ThemeScrollbar`	Scoped subtrees and the theme-aware overlay scrollbar, registered automatically.