Set up Master CSS in Vue.js

Guide to setting up Master CSS in your Vue.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://vuejs.pr.beta.css.master.co

Quick start

This is a simple Vite example of Vue.js server-side rendering.

A full-stack framework, such as Nuxt.js, is recommended for better application performance and experience.

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

Are you building a Vue.js single-page application (SPA)? Use the handy Master CSS Runtime Rendering in Vue.js.