Integrations

Set up Master CSS in Vue.js

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

Create a project

If you don't have a Vue.js project, create one first. It's recommended to refer to Quick Start - Vue.js.

npm init vue@latestcd my-app

Install Master CSS

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

npm i @master/css.vite@rc

Create a configuration file

Run the command to create a master.css.js file.

npm create @master/css@rc

Set up Master CSS

Add a masterCSS vite plugin in vite.config.js.

  • By default, options.mode is set to runtime.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite' export default defineConfig({    plugins: [        masterCSS()     ]})

Start dev server

Run the command to start the Vite dev server.

npm run dev

Start using Master CSS

Now style your first element using Master CSS syntax!

<template>    <h1 class="italic m:12x fg:strong font:40 font:heavy">        Hello World    </h1></template>
localhost:3000

Hello World


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

  • Master UI


© 2025 Aoyue Design LLC.MIT License
Trademark Policy