Vue with Vite

Set up

1. Write the configuration once

   A partial that forwards @nuvoui/core/mixins with your settings. The mixins entry has the same API as @nuvoui/core (apply(), every mixin, token(), with()) and outputs no CSS.

   src/styles/_nuvo.scss

   @forward "@nuvoui/core/mixins" with ($brand: #4361ee, $generate-utility-classes: true);

2. Create the global stylesheet

   It emits the tokens, the reset, the base styles and the utility classes with your configuration. @use "nuvo" comes first, so core loads with the configured brand. Nothing else in the app loads @nuvoui/core.

   src/styles/global.scss

   @use "nuvo";
   @use "@nuvoui/core";

3. Import it in the entry

   Imported once in main.js, it applies to the whole app.

   src/main.js

   import { createApp } from 'vue'
   import './styles/global.scss'
   import App from './App.vue'
   
   createApp(App).mount('#app')

With utility classes

Classes go straight into the template.

<script setup>
import Card from './components/Card.vue'
</script>

<template>
  <main class="grid gap-4 p-6">
    <div class="flex between x-center gap-3 p-4 bg-surface border rounded-md">
      <span class="font-semibold">Invoices</span>
      <span class="bg-success-subtle text-success text-xs rounded-full px-2 py-1">Paid</span>
    </div>
    <Card title="Quarterly report">Revenue and churn for July to September.</Card>
  </main>
</template>

With apply()

Each component loads the partial and writes only its own rules. Numbers are configuration keys (p(4) is var(--nu-space-4)), and modifiers come after the utility: state and breakpoint in either order. scoped keeps the rules on this component.

<script setup>
defineProps({ title: String })
</script>

<template>
  <article class="card">
    <h2 class="title">{{ title }}</h2>
    <p class="text"><slot /></p>
  </article>
</template>

<style scoped lang="scss">
@use "../styles/nuvo" as *;

.card {
    @include apply(p(4), bg(surface), rounded(md), shadow(md) hover, p(6) md);
}

.title {
    @include apply(m(0), font-size(lg), font(semibold));
}

.text {
    @include apply(mt(2), mb(0), text-color(muted));
}
</style>

Dark mode

With no data-theme on <html>, the tokens follow the operating system setting. Set data-theme="dark" or data-theme="light" to choose one, and change it from a script to switch at runtime: document.documentElement.dataset.theme = "dark". Any element can carry data-theme to theme only its own subtree. Every class and every apply() rule reads the tokens, so nothing else changes.

<html lang="en" data-theme="dark">

What gets emitted

The global stylesheet holds the tokens, the light and dark themes, the reset, the base styles, the tooltips, the @property registrations and, with $generate-utility-classes: true, every utility class: about 1 MB minified, 92 KB gzipped. Without the classes it is about 42 KB. Load it on every page, because the tokens live there.

The style block of Card.vue compiles to five rules and nothing else: .card[data-v-...], its hover, its md padding, the title and the text. The tokens are not repeated per component, and a component cannot reset the configured brand.