Installation

npm

npm install @veebox/core @veebox/vue

pnpm

pnpm add @veebox/core @veebox/vue

yarn

yarn add @veebox/core @veebox/vue

Then, import and register the plugin globally.

import { createApp } from 'vue';
import App from './App.vue';
import { VBoxPlugin } from '@veebox/vue';

const app = createApp(App);
app.use(VBoxPlugin);
app.mount('#app');

Next, run npx vbox-type-gen to generate a vbox.d.ts file that provides type definitions for the default theme. Make sure to include this file in your tsconfig.json under the include array for type-safety and autocompletion support.

Internally, the plugin registers the VBox component globally. Now you can use the component in your Vue templates to style elements.

<template>
  <v-box
    is="img"
    src="/victor-osimhen.jpg"
    alt="Victor Osimhen"
    title="Victor Osimhen"
    height="80px"
    width="80px"
    border-radius="50%"
    object-fit="cover"
  />
</template>