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.