https://github.com/brugarolas/vuersatile-components
A Vue 3 component library with a CSS framework integrated
https://github.com/brugarolas/vuersatile-components
bem components components-library css css-framework form-validation javascript scss scss-framework ui-components ui-kit validation validation-library vitepress vue vue-components vue3 vue3-components vuejs vuejs-components
Last synced: 28 days ago
JSON representation
A Vue 3 component library with a CSS framework integrated
- Host: GitHub
- URL: https://github.com/brugarolas/vuersatile-components
- Owner: Brugarolas
- License: gpl-3.0
- Created: 2023-03-26T22:31:23.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-05-12T15:21:53.000Z (about 2 years ago)
- Last Synced: 2025-03-28T08:41:27.006Z (about 2 months ago)
- Topics: bem, components, components-library, css, css-framework, form-validation, javascript, scss, scss-framework, ui-components, ui-kit, validation, validation-library, vitepress, vue, vue-components, vue3, vue3-components, vuejs, vuejs-components
- Language: Vue
- Homepage: https://www.andres-brugarolas.com/vuersatile-components/
- Size: 6.11 MB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.buymeacoffee.com/brugarolas)
# Vuersatile Components
## Installation
We can install `Vuersatile Components` with NPM:
```bash
npm install --save vuersatile-components
```
## Usage
First, we need to configure our library. `Vuersatile Components` comes with `vue-i18n` pre-bundled, so we have to pass its options as param to our library configurator. Here us one example of app configuration:
```js
import '../node_modules/vuersatile-components/dist/style.css' // Vite fix
import '../node_modules/vuersatile-components/dist/style.scss'
import { VuersatileInit } from 'vuersatile-components'
import messages from './messages.json';
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
VuersatileInit(app, {
locale: 'en', // set locale
messages: {
en: messages // set locale messages
}
});
app.use(createPinia())
app.use(router)
app.mount('#app')
```
Now we can use our components wherever we want:
```js
import {
Card,
Tooltip,
LockedIcon,
TooltipInfo,
Form,
InputText,
InputNumber,
InputPassword,
ToggleSwitch,
SegmentedControl,
Checkbox,
InputTextarea,
RadioButtonGroup,
InputSelect,
InputMultiSelect
} from 'vuersatile-components';
```
## i18n default messages
```json
{
"FORM": {
"ERROR": {
"EMAIL": "Invalid email",
"MAX_VALUE": "You must enter a number least than indicated",
"MIN_CURRENT_DATE": "You must enter a date greater than today",
"MIN_VALUE": "You must enter a number greater than indicated",
"NOT_DATE": "Field must be valid date",
"NOT_EMPTY": "Field can't be empty",
"NOT_EMPTY_NUMBER": "You must enter a number",
"NOT_EQUAL": "This information does not match",
"NOT_INT": "Field must be integer",
"NOT_NUMBER": "Field must be number",
"NOT_VALID_TIME": "Field is not a valid time",
"PHONE": "Invalid phone number",
"MANDATORY_LONG": "Field is mandatory",
"NOT_MAX_LENGTH": "Invalid max length",
"NOT_MIN_LENGTH": "Invalid min length"
}
},
"GENERIC": {
"ADD": "Add",
"CLEAR": "Clear",
"CONTINUE": "Continue",
"FROM": "From",
"NO_RESULTS": "No results",
"NO": "No",
"SEARCH": "Search",
"TO": "To",
"YES": "Yes"
}
}
```