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 defer loads the runtime engine to keep track of the dynamic class names.
Faster page loading
Non-rendering-blocking internal CSS and defer loading
Fully automatic
Capture any program-generated class names
CSS encapsulation
Only ship the page-used CSS instead of the whole site
Quick start
Clone the example
Copy-paste the commands to quickly start using the https://nuxtjs.pr.rc.css.master.co example.
You can skip all installation steps.
npm create @master/css@rc <project> --example nuxt.jscd <project>npm run devInstallation
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>Initialize configuration file
Run the command to create a configuration file master.css.ts.
npm create @master/css@rcInstall Master CSS
Install Master CSS Nuxt into your project via package managers.
npm i @master/css.nuxt@rcSet up CSS runtime engine
Register Master CSS Runtime with official CSSRuntimeProvider and provide instance context.
<script setup lang="ts">import CSSRuntimeProvider from '@master/css.vue' import config from './master.css' </script><template> <CSSRuntimeProvider :config="config"> … </CSSRuntimeProvider></template>Set up CSS pre-rendering
All CSS rules are pre-rendered and injected into HTML on the server side or at build time.
- Add a
@master/css.nuxtto the nuxt modules
export default defineNuxtConfig({ modules: [ '@master/css.nuxt' ]})Launch server
Run npm run dev to start your Nuxt.js development server
npm run devStart using Master CSS
Now style your first element using Master CSS syntax!
<template> <h1 class="font:40 font:heavy italic m:12x text:center">Hello World</h1></template>Open your browser to watch the changes.