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.