vuement
TypeScript icon, indicating that this package has built-in type declarations

0.12.4 • Public • Published

Vuement Logo


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.

Package Sidebar

Install

npm i vuement

Homepage

vuement.com/

Weekly Downloads

0

Version

0.12.4

License

MIT

Unpacked Size

4.32 MB

Total Files

12

Last publish

Collaborators

  • timo_scheuermann