vuement

---

55+ Components, ready to use, for Vue.js

Installation

 # npm
npm install vuement

 # yarn
yarn add vuement

Use

 import Vue from 'vue';
import Vuement from 'vuement';

Vue.use(Vuement);

// you can pass options like colors and themes
Vue.use(Vuement, { colors: { primary: "#08f" }, theme: "light" });


// The theme can later also be changed by accessing the $vm object.
this.$vm.setTheme("dark");

The $vm Object

Using the $vm object you can communicate with components and change their appearance. Available methods are listed below:

 this.$vm.setTheme(theme: string): void

 this.$vm.setColor(name: string, hex: string): void

 this.$vm.addTheme(name: string, theme: VMTheme, replace = false): void

 this.$vm.sendNotification(notificiation: VMNotificationObject): number

 this.$vm.closeNotification(id: number): void

 this.$vm.closeAllNotifications(): void

---

 export interface VMTheme {
  color: string;
  'color-secondary': string;
  background: string;
  paragraph: string;
  container: string;
  border: string;
}

 export interface VMNotificationObject {
  vmId?: string | number;
  title?: string;
  text?: string;
  image?: string;
  href?: string;
  to?: Location;
  routeName?: string;
  callback?: VoidFunction;
  duration?: 'none' | number;
  closeable?: boolean;
  content?: VueConstructor<Vue>;
  props?: Record<string, any>;
}

---

Available Components

vmAccordion
, vmAction
, vmAvatar
, vmButton
, vmCard
, vmCheckbox
, vmChip
, vmDialog
, vmDivider
, vmFlow
, vmGrid
, vmHero
, vmImage
, vmInput
, vmLink
, vmList
, vmMenuButton
, vmNavbar
, vmNotification
, vmOnboarding
, vmProgress
, vmQuote
, vmRadio
, vmRevealer
, vmScrollUp
, vmSegment
, vmSelect
, vmSheet
, vmSidebar
, vmSlider
, vmSpacer
, vmSpinner
, vmSwitch
, vmTabbar
, vmTable
, vmTextarea
, vmTitle

Some components also feature child components. Eg. vmTabbar includes vmTabbarItem, vmAvatar includes vmAvatarGroup, ...

For further information consider checking out the official docs at Vuement.com

---

This is still a WiP, further documentation and in-depth looks inside each component is available here.