Nuxt
@themvora/nuxt
Nuxt 4ModuleSSRZero-flash6 exports
Nuxt 4 module: SSR-first theming, zero-flash bootstrap, cookie + localStorage sync, config-driven transitions and scrollbar.
Verified with Themvora 2.0.0·Updated 2026-09-17
Prerequisites
Package Manager
npm, pnpm, yarn, or bun
Dependencies
@themvora/core (peer dependency)
Use Case
Nuxt projects with theme support
Installation
Install the integration — @themvora/core is pulled in automatically as a dependency.
pnpm add @themvora/nuxtQuick Start
Complete copy-paste usage for this package.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ["@themvora/nuxt"],
themvora: {
defaultTheme: "mint-light",
initialMode: "system",
transition: { duration: 360, easing: "cubic-bezier(0.4, 0, 0.2, 1)" },
scrollbar: true,
},
});More Examples
Additional patterns for Nuxt.
<script setup lang="ts">
// useTheme, useThemeMode, useThemeFamily are auto-imported by the module
const { theme, mode, setMode, toggleTheme } = useTheme();
</script>
<template>
<div>
<span>{{ theme.name }} | {{ mode }}</span>
<button @click="toggleTheme">Toggle</button>
<button @click="setMode('light')">Light</button>
<button @click="setMode('dark')">Dark</button>
<button @click="setMode('system')">System</button>
</div>
</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. |