UnoCSS, Vite + Vue3 easy setup

What is UnoCSS in brief?

UnoCSS is a modern, flexible, and high-performance CSS engine. It provides core CSS functionalities through presets, making application styling quick and easy without compromising performance or flexibility. It uses atomic CSS principles, allowing for the creation of small, reusable styles that can be combined for complex designs. UnoCSS enables the development of high-performance applications without the limitations of popular frameworks.

Let's easily use it with Vue3 + Vite

Firstly, I recommend checking out the official documentation at https://unocss.dev/guide/. However, since the documentation is primarily based on TypeScript code examples, I'm preparing this mini tutorial to reduce any confusion.

First, we create our Vue project;

npm init vue@latest

After selecting the project name and requirements step by step, we will include UnoCSS in the project. I am simply sharing my settings.

Vue.js - The Progressive JavaScript Framework

✔ Project name: … unocss-vue
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No

Scaffolding project in ../unocss-vue...

Done. Now run:

  cd unocss-vue
  npm install
  npm run dev

Let's navigate to the directory where the project is installed and run the "npm install" command to install the project.

In the same directory, we are including UnoCSS in the game;

npm i -D unocss

UnoCSS has been added to the project dependencies, now let's include the package in the vite.config.js file.

// vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// import UNOCSS
import Unocss from 'unocss/vite'

export default defineConfig({
  plugins: [vue(),Unocss({})], // define as plugin.
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

We can start using the uno.css file in our main.js file in the project by importing it;

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'uno.css'

createApp(App).mount('#app')

Let's start using UnoCSS by customizing it with "Presets," which are predefined packages. I recommend checking out the documentation for all other packages here.

Let me briefly mention the packages we will install:

Uno preset: It works as a common version of popular frameworks such as Tailwind CSS, Windi CSS, Bootstrap, Tachyons, etc.

Attributify preset: You can use the attributify mode inside HTML elements, for example;

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

Let's install these two packages in the directory where our project is located,

npm i -D @unocss/preset-uno
npm i -D @unocss/preset-attributify

Then add the installed packages to the vite.config.js file and define their settings,

// vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// UNOCSS
import Unocss from 'unocss/vite'
import { presetAttributify, presetUno } from 'unocss' // Presets

export default defineConfig({
  plugins: [vue(),
  Unocss({
    presets: [presetAttributify(),presetUno()], // Presets
  })],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

All installations are done. Now we can use UnoCSS in our Vue project, and I highly recommend using the VS Code extension. Currently, there is no plugin available for Jetbrains IDEs, but I hope it will be developed soon. You can vote here for support WEB-59407

Example App.vue template structure:

<template>
  <nav text-white bg-green-5 flex justify-between font-sans vw-100 py-6 px-4>
    <div>Logo</div>
    <div w-10rem flex justify-around>
      <span>Home</span>
      <span>Contact</span>
    </div>
  </nav>
  <main flex justify-center items-center vw-100 h-20rem bg-gray-2 >
    <div font-sans text-3xl font-500>Hero</div>
  </main>
</template>

App view;

Well done.

If you're looking for a fast and easy-to-use CSS framework, UnoCSS is a powerful option.

Thank you for reading! I hope this short tutorial has been helpful. If you have any questions or comments, please feel free to share them down below.

If you like this post, please like and share <3