🚀 Style your Vue website faster with Stylify CSS

Style your Vue website faster and intuitively with Stylify.

50% discount on .EU, .ONLINE, .STORE, .TECH, .SITE, .WEBSITE, .SPACE, .FUN domains.
Code DM241ERDTF

Stylify + Vue + Vite. Style your Vue website faster with Stylify. Don’t study selectors, syntax and documentation. Use pure CSS syntax and get generated CSS with advanced optimization for production.

For an easier start, you can check out the Stylify Stackblitz playground 🎮.

💎 Stylify CSS Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

• ✅ CSS-like selectors
• ✅ No framework to study
• ✅ Less time spent in docs
• ✅ Mangled & Extremely small CSS
• ✅ No CSS purge needed
• ✅ Components, Variables, Custom selectors
• ✅ It can generate multiple CSS bundles

Also we have a page about what problems Stylify CSS solves and why you should give it a try!

🚀 Vue.js Setup

The easiest way to Setup the Vue is using CLI:

• Run yarn create vite app
• Select vue
• Then cd app

This way you will get the default Vue application skeleton.

🔌 Stylify CSS Integration

Install the @stylify/unplugin package using NPM or Yarn:

yarn add @stylify/unplugin
npm i @stylify/unplugin

Open the vite.config.js and copy the following content into it:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [
		{
			files: ['./src/**/*.vue'],
			outputFile: './src/assets/stylify.css',
		},
	]
});

export default defineConfig(() => ({
	plugins: [stylifyPlugin, vue()]
}));

In the last step, open the src/main.js and add the path to stylify.css:

// ...
import './stylify.css'

Styling the website

If you copy the code below into the src/App.vue and run yarn dev you will get a styled Hello World! 🎉 text:

<template>
	<div class="max-width:800px margin:0_auto">
		<h1 class="text-align:center margin-top:100px font-size:42px">Hello World!🤩</h1>
	</div>
</template>

Stylify watches any change in the files that matches the mask in the bundle files and generates CSS into the src/stylify.css.

If you add for example color:blue, the CSS will be automatically updated 🎉.

Go ahead and try Stylify CSS directly on Stackblitz.com 💡.

Components

To avoid bloated templates with utilities, you can use components directly in files, where they are used through content options (expects javascript object without brackets) or in the compiler config.

<!--
stylify-components
	container: 'max-width:800px margin:0_auto',
	title: 'text-align:center margin-top:100px font-size:42px'
/stylify-components
-->
<template>
	<div class="container">
		<h1 class="title">Hello World!🤩</h1>
	</div>
</template>

Variables

If you like clean code, you also want to avoid hardcoded values in selectors. Variables can be defined in the same way as components:

<!--
stylify-variables
	titleFontSize: '42px',
	containerWidth: '800px'
/stylify-variables

stylify-components
	container: 'max-width:$containerWidth margin:0_auto',
	title: 'text-align:center margin-top:100px font-size:$titleFontSize'
/stylify-components
-->
<template>
	<div class="container">
		<h1 class="title">Hello World!🤩</h1>
	</div>
</template>

Building for production

If you run yarn build + yarn preview, the vue markup will be mangled into this:

<template>
	<div class="a">
		<h1 class="d">Hello World!🤩</h1>
	</div>
</template>

The CSS is shortened too:

:root {--titleFontSize: 42px;--containerWidth: 800px;}
.b,.a{max-width:800px}
.c,.a{margin:0 auto}
.f,.d{text-align:center}
.e,.d{margin-top:100px}
.g,.d{font-size:42px}

Configure anything you need

The examples above don’t include everything Stylify CSS can do:

• You can map nested files in the template
• Style global selectors
• Define custom screens
• Add your macros like ml:20px for margin-left
• And a lot more

Feel free to check out the docs to learn more 💎.