Using Stylify CSS in Vue.js

Try it on StackBlitz

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

The example bellow works with the Vite - Vue template. You can however use the example bellow 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 { vitePlugin } from '@stylify/unplugin';

const stylifyPlugin = vitePlugin({
    bundles: [{ files: ['./src/**'], outputFile: './src/stylify.css' }],
    // Optional -
    compiler: {
        variables: {},
        macros: {},
        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.


There is a lot of options you can configure:

Where to go next?