Using Stylify CSS in Vue.js

Vue.js is Progressive JavaScript Framework.

Try it on StackBlitz

How to integrate the Stylify CSS with Vue.js and Vite.js

The example below works with the Vite - Vue template. You can however use the example below and configure it for React.js, Vue and any other framework you use.

First, install the @stylify/unplugin package using NPM or Yarn:

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

Next add the following configuration into the vite.config.js:

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

const stylifyPlugin = stylifyVite({
	bundles: [{ files: ['./src/**'], outputFile: './src/stylify.css' }],
	// Optional
	// Compiler config info https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/docs/stylify/compiler#components
		components: {},
		// ...
	}
});

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

Now you can add the path of the generated src/stylify.css into src/main.js file:

import './stylify.css';

Now run yarn dev. The src/stylify.css file will be generated.

Configuration

There is a lot of options you can configure:

• @stylify/unplugin
• Compiler config