Vunix Presets

Vunix allows you to overide the provided preset or to create a new one from scratch.

Default preset

Vunix provide a default preset that has been created according to the figma template.

Due to performances issue the default Vunix preset is not injected automaticaly if you are using Vue.js. To inject the preset you will need to pass it to the plugin param.

main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { plugin } from '@vunix/vue'
import { presets } from '@vunix/vue'
import './assets/main.css'
const app = createApp(App)
app.use(router).use(plugin, {
  preset: presets.vunix
})
app.mount('#app')

Customize the preset

Sometimes you need to overide or extend the preset you use. For instance if you need to add a new button variant you can do it by providing a custom configuration.

How to overide the preset with Nuxt.js

To take advantage of the HMR feature the vunix configuration use the AppConfigFile

Here an exemple of usage:

app.config.ts
export default defineAppConfig({
  vunix: {
    config: {
      Button: {
        variants: {
          'red-800': 'bg-red-800 text-red-900 hover:bg-red-200 focus:outline-none focus:ring focus:ring-red-300'
        }
      }
    },
  }
})
Check the nuxt-example package for usage

How to overide the preset with Vue.js

The custom configuration can be provided from the vue plugin used in your main.ts.

main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { plugin } from '@vunix/vue'
import config from '../vunix.config'
import { presets } from '@vunix/vue'
import './assets/main.css'
const app = createApp(App)
app.use(router).use(plugin, {
  config,
  preset: presets.vunix
})
app.mount('#app')

Your configuration file will look like

vunix.config.ts
import type { Config } from '@vunix/core'
export default {
  Button: {
    variants: {
      'red-800': 'bg-red-800 text-red-900 hover:bg-red-200 focus:outline-none focus:ring focus:ring-red-300'
    }
  }
} as Config
Check the vue-example package for usage
Edit this page on GitHub
Table of Contents