Set up Master CSS in Nuxt.js

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

Master CSS Progressive Rendering scans the rendered HTML ahead of time, server-side or at build time, generates the corresponding CSS rules for each page, and lazy loads the runtime engine to keep track of the dynamic class names.

Faster page loading

Non-rendering-blocking internal CSS and lazy loading

Fully automatic

Capture any program-generated class names

CSS encapsulation

Only ship the page-used CSS instead of the whole site

https://nuxtjs.pr.beta.css.master.co

Quick start

Clone the example

Copy-paste the following commands to quickly start using the nuxtjs.pr.beta.css.master.co.

You can skip all installation steps.

npx degit master-co/css/examples/nuxt.js-with-progressive-rendering my-project
cd my-project
npm install @master/css.vue@beta @master/css-server.nitro@beta
npm install
npm run dev

Installation

Create a 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 project
cd project

Install Master CSS

Install Master CSS Vue and Server Nitro into your project via package managers.

npm install @master/css.vue@beta @master/css-server.nitro@beta

Initialize configuration file

Run npx mcss init to create a configuration file master.css.ts.

npx mcss init

Set up CSS runtime engine

Dynamic import('@master/css.vue')
Dynamic import('../master.css')

@master/css.vue and master.css.ts will not be included in the page's initial JavaScript bundle.

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
const CSSProvider = defineAsyncComponent(async () => (await import('@master/css.vue')).CSSProvider)
</script>
 
<template>
    <CSSProvider :config="import('./master.css')">
        …
    </CSSProvider>
</template>

Set up CSS pre-rendering

All CSS rules are pre-rendered and injected into HTML on the server side or at build time.

Create server/plugins/css-server.ts file
Create a Master CSS Server Nitro plugin

import { createCSSServerPlugin } from '@master/css-server.nitro'
// @ts-expect-error allowImportingTsExtensions
import config from '../../master.css.ts'
 
export default createCSSServerPlugin({ config })

Launch server

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

npm run dev

Start using Master CSS

Now style your first element using Master CSS syntax!

<template>
    <h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
</template>

Open your browser to watch the changes.

localhost:3000