Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

Integration with UnoCSS
#

Here is guide how to integrate Vuestic UI colors and breakpoints into UnoCSS configuration.

Preparations
#

Before we start with integration, please ensure you have both UnoCSS and Vuestic UI installed. If that's not the case - here are installation guide for the Vuestic UI and for the UnoCSS.

Also you need to install unocss-preset-theme preset.

npm i -D unocss-preset-theme

Setup
#

Configure configuration file for the UnoCSS as shown below.

// unocss.config.*
import { defineConfig, presetUno } from 'unocss'
import presetTheme from 'unocss-preset-theme'
import { colorsPreset, thresholdsPreset } from 'vuestic-ui'

const convertNumbersToCssUnits = (obj, unit = 'px') =>
  Object.entries(obj).reduce((acc, [key, value]) => ({
    ...acc,
    [key]: `${value}${unit}`,
  }), {})

export default defineConfig({
  theme: {
    colors: colorsPreset.light,
    breakpoints: convertNumbersToCssUnits(thresholdsPreset),
  },
  presets: [
    presetUno({
      dark: 'media',
    }),
    presetTheme({
      theme: {
        dark: {
          colors: colorsPreset.dark,
        },
      },
    }),
  ],
})