@volverjs/ui-vue

@volverjs/ui-vue

vue components component-library design-system
input button accordion badge combobox breadcrumb dialog
checkbox radio textarea badge

maintained with ❤️ by

Install

@volverjs/ui-vue is closely linked to @volverjs/style and is neeeded to style components.

# pnpm
pnpm add @volverjs/ui-vue

# yarn
yarn add @volverjs/ui-vue

# npm
npm install @volverjs/ui-vue --save

Usage

Install the plugin in your main.ts file.

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// import @volverjs/ui-vue plugin
import { VolverPlugin } from '@volverjs/ui-vue'
// import @volverjs/ui-vue icons collections
import iconsCollections from '@volverjs/ui-vue/icons'
/*
 * import @volverjs/style base style with reset and props
 * for scss support you can import the scss file
 * import '@volverjs/style/scss/base'
 */
import '@volverjs/style/base'

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

// install the plugin
app.use(VolverPlugin, {
  iconsCollections,
  /*
   * if you want can import components globally
   * components: { VvButton, VvInputText }
   */
  compoments: undefined,
  /*
   * if you want can import directives globally
   * directives: { toolip: VTooltip }
   */
  directives: undefined,
  /*
   * if you want can create components aliases
   * aliases: { Btn: VvButton, BtnDanger: VvButton}
   */
  aliases: undefined,
  /*
   * if you want can change default props
   * for globally imported components and aliases
   * defaults: { VvButton: { modifiers: 'secondary', BtnDanger: { modifiers: 'danger' } }
   */
  defaults: undefined
})

Than you can import components and use them in your templates.

<script setup lang="ts">
  // MyComponent.vue
  /*
   * import the component
   * all components are also available with a dedicated export
   * import VvButton from '@volverjs/ui-vue/vv-button'
   */
  import { VvButton } from '@volverjs/ui-vue/components'
  /*
   * import the component style
   * for scss support you can import the scss file
   * import '@volverjs/style/scss/vv-button'
   */
  import '@volverjs/style/vv-button'
</script>

<template>
  <VvButton label="Button" />
</template>

Icons Collections

@volverjs/ui-vue comes with a set of icons with different levels of details. You can use them by importing @volverjs/ui-vue/icons.

To learn more about icons collections, check icons documentation.

Unplugin Resolver

You can use @volverjs/ui-vue with unplugin-vue-components to automatically import components and styles.

// vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { VolverResolver } from '@volverjs/ui-vue/resolvers/unplugin'

export default defineConfig({
  // ...
  plugins: [
    // ...
    Components({
      resolvers: [
        VolverResolver({
          /*
           * enable/disable auto import of components style
           * also accept 'scss' for scss support
           * default: false
           */
          importStyle: false,
          /*
           * enable/disable auto import of directives
           * default: false
           */
          directives: false,
          /*
           * Change components prefix
           * default: 'vv'
           */
          prefix: 'vv'
        })
      ]
    })
  ]
})

Roadmap

The following features are planned for the next releases:

• [x] (v0.0.3) VvTooltip component and v-tooltip directive;
• [x] (v0.0.3) Redesign of VvCombobox for better accessibility and more features;
• [x] (v0.0.3) Rewrite of VvDropdown to get it applicable to any element;
• [x] (v0.0.5) Input masks for VvInputText component;
• [x] (v0.0.6) VvAvatar and VvAvatarGroup component;
• [x] (v0.0.6) Menus, navigation and tabs with VvNav and VvTab;
• [x] (v0.0.6) Alerts, notifications and toasts with VvAlert and VvAlertGroup component;
• [ ] Loaders with VvLoader and VvSkeleton;
• [ ] VvTable component with sort, filters, pagination and cell editing;
• [ ] Multiple uploads, image crop and file previews with VvInputFile;
• [ ] Carousel and galleries with VvCarousel component;
• [ ] Calendar and date picker with VvCalendar component.

Documentation

To learn more about @volverjs/ui-vue, check its documentation.

License

MIT