Getting Started ​

Prerequisites ​

• Node.js v12+
• Vue 3 or Nuxt 3

Import necessary globable CSS file ​

Vue ​

In your main.{js,ts} file ​

You should import it before your own CSS

import '@zadigetvoltaire/ui/css/main.css'
import './path_to_your/main.css'

In your main CSS file ​

Import the file before your own CSS rules

main.css

@import url('@zadigetvoltaire/ui/css/main.css');

h1 {
  color: red;
}

Nuxt ​

In nuxt.config.{js,ts}

export default defineNuxtConfig({
  css: ['@zadigetvoltaire/ui/css/main.css', './path_to_your/main.css'],
})

Component importation ​

To optimize your bundle size, it's recommended to use the partial import

In component ​

<template>
  <ZvButton> Button </ZvButton>
</template>

<script lang="ts" setup>
  import ZvButton from '@zadigetvoltaire/ui/components/ZvButton'
</script>

Globally ​

Sometimes for components used in a large part of the application, you can install them globally:

import { createApp } from 'vue'

import ZvButton from '@zadigetvoltaire/ui/components/ZvButton'

const app = createApp(App)

app.component('ZvButton', ZvButton)