1.0.5 • Published 2 years ago
@open-vue-collection/ui v1.0.5
@open-vue-collection/ui
Requires
- Vue 3
- Vuex 4
Installation
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" $YourProPackageToken
npm install @open-vue-collection/ui
// src/main.js or src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import UI from '@open-vue-collection/ui';
import store from './store'; // Vuex 4
const app = createApp(App)
.use(store) // important: install the Vuex store first!
.use(UI)
.mount('#app');
// tailwind.config.js
/* eslint-disable @typescript-eslint/no-var-requires */
const colors = require('tailwindcss/colors');
module.exports = {
purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
borderRadius: {
sm: '4px',
},
},
fontFamily: {
display: ['Montserrat'],
header: ['Cubano'],
},
colors: {
transparent: 'transparent',
current: 'currentColor',
primary: 'rgba(24, 118, 210, var(--tw-bg-opacity))',
...colors,
},
},
variants: {
extend: {},
},
plugins: [],
};
Darkmode
// Switch between dark and light mode
this.$store.commit('darkmode/switch');
// active mode
this.$store.getters['darkmode/mode'] // -> 'dark' | 'light'
// if dark mode is active
this.$store.getters['darkmode/dark'] // -> boolean
Components
- ✅ vue-button
✅ vue-icon-button
✅ vue-card
✅ vue-tooltip
🕐 vue-nav-bar
🕐 vue-nav
🕐 vue-simple-card
🕐 vue-backdrop
🕐 vue-app
🕐 vue-modal