Navigation
Integrations

Set up Master CSS in Nuxt

Load the project CSS entry through Nuxt and verify static styles, browser generation or Nitro response rendering.

On this page

Install the Master CSS Nuxt module and load its CSS entry through Nuxt’s css option. The module handles CSS delivery without changing Nuxt’s HTML rendering mode.

#Installation

  1. #Add Master CSS

    In an existing Nuxt project, run the installer from the project root. Static is the default: it scans complete class strings and emits ordinary CSS.

    npm create @master/css@2.0.0 -- --framework nuxt --yes

  2. #Load the project stylesheet

    Keep the module registration and explicitly load the CSS entry created by the installer. ~~/ points to the project root, including in Nuxt projects whose application directory is app/.

    nuxt.config.ts
    export default defineNuxtConfig({  modules: [['@master/css-nuxt', { mode: 'static' }]],  css: ['~~/assets/css/master.css']})
    assets/css/master.css
    @import '@master/css';

  3. #Start using Master CSS

    Start the dev server and style your first component. These examples use Nuxt 4's app/ directory.

    4. Check the installed styles

    app/app.vue
    <template>  <p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">    Hello World  </p></template>
    A neutral surface, a fine border, small corners and 1rem of padding on every side.

#Check the setup

Change p-md to p-lg in app/app.vue with the dev server running: padding should grow from 1rem to 1.5rem. Restore it, then build and serve the app. For Nuxt's default Node server preset:

npm run buildnode .output/server/index.mjs

For another Nitro deployment preset, use its serving procedure. With Nuxt SSR enabled, disable JavaScript and reload: the paragraph should retain its padding, rounded corners and raised surface. Static describes the CSS generation; it does not turn client-only Nuxt pages into server-rendered pages.

If the page is unstyled, confirm the css option loads the root stylesheet, then check that the module is registered once. Inspect the loaded CSS for .p-md; a successful build alone does not establish that the entry reached the page.

#Choose another rendering mode

Static mode is the default. The installer option sets the module's mode; keep the CSS entry when changing modes:

ModeInstaller optionDelivery
StaticNoneGenerated stylesheet from source scanning
Runtime--mode runtimeBrowser runtime, without server-side first-page CSS
Progressive--mode progressiveFirst-response CSS from Nitro plus a runtime handoff
Generate new classes in the browser
npm create @master/css@2.0.0 -- --framework nuxt --mode runtime --yes

The installer registers ['@master/css-nuxt', { mode: 'runtime' }]. With SSR enabled, Nuxt still renders HTML on the server, while the runtime supplies generated class rules in the browser. After building and serving the Nitro output, run this in the browser console:

document.querySelector('#master-check').classList.add('underline')

The paragraph should gain an underline without rebuilding. If it does not, inspect the runtime program request and console diagnostics.

Include server-rendered styles
npm create @master/css@2.0.0 -- --framework nuxt --mode progressive --yes

Progressive mode adds first-response CSS to Nitro HTML responses with string bodies; streaming bodies are not transformed. Check initial styling with JavaScript disabled, then a later class absent from the page manifest as above.

Also test the copied deployment artifact in its target directory: an in-place build does not establish that all manifest and program paths are portable. If the copied server reports an ENOENT path under the original project's node_modules/.master-css/manifest/, it still depends on a build-machine manifest and is not ready for an independent deployment. Use static or runtime mode when either meets the application's delivery needs, and verify the chosen output after moving it too.