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-appInstall Master CSS
Install the Vue integration into your project.
npm i @master/css.vue@rcSet up Master CSS
Add the masterCSS Vue Vite plugin in vite.config.js.
- By default,
options.modeis set toruntime. - Production runtime builds follow the Vite project manifest preload behavior.
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import masterCSS from '@master/css.vue/vite' export default defineConfig({ plugins: [ vue(), masterCSS() ]})Import the default stylesheet
Import Master CSS from your app stylesheet. This stylesheet is also the project CSS entry.
@import '@master/css';Set up code linting
Install the Master CSS ESLint config with the Vue parser stack, then add it to eslint.config.js.
Code linting validates classes in Vue templates and JavaScript class utilities.
npm i -D @master/eslint-config-css@rc eslint-plugin-vue @vue/eslint-config-typescript @eslint/compat eslintimport { includeIgnoreFile } from '@eslint/compat'import { fileURLToPath } from 'node:url'import vue from 'eslint-plugin-vue'import vueTS from '@vue/eslint-config-typescript'import css from '@master/eslint-config-css' const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url))export default [ includeIgnoreFile(gitignorePath), ...vue.configs['flat/essential'], ...vueTS(), ...css ]Start dev server
Run the command to start the Vite dev server.
npm run devStart using Master CSS
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
A full-stack framework, such as Nuxt.js, is recommended for better application performance and experience.