Set up Master CSS in Nuxt.js

Guide to setting up Master CSS in your Nuxt.js project.

If you don't have a Nuxt.js project, create one first. It's recommended to refer to Get started with Nuxt.js.

npx nuxi@latest init my-appcd my-app

Install @master/css.nuxt plugin into your project.

npm i @master/css.nuxt@rc

Add a @master/css.nuxt module in nuxt.config.ts.

By default, options.mode is set to progressive.
Nitro prerendered HTML externalizes page hydration manifests to /_master-css/hydration/….
Ordinary dynamic SSR responses keep the inline hydration manifest for the current request.
In mode: 'runtime', Nuxt publishes /_master-css/manifest/master-css-manifest.<hash>.json and preloads it from the document head when client runtime injection is enabled. Progressive mode does not preload page hydration manifests. See Preload runtime project manifests.

export default defineNuxtConfig({    modules: [        '@master/css.nuxt'     ]})

Import Master CSS from a global Vue style block. This style block is also the project CSS entry.

<style>@import '@master/css';</style>

Run npm run dev to start your Nuxt.js development server

npm run dev

Now style your first element using Master CSS syntax!

<template>    <h1 class="italic m:2xl text:neutral font:5xl font:heavy">        Hello World    </h1></template>

localhost:3000

Hello World