We can installVuersatile Components with NPM:
npm install --save vuersatile-components
First, we need to configure our library.Vuersatile Components comes withvue-i18n pre-bundled, so we have to pass its options as param to our library configurator. Here us one example of app configuration:
import'../node_modules/vuersatile-components/dist/style.css'// Vite fiximport'../node_modules/vuersatile-components/dist/style.scss'import{VuersatileInit}from'vuersatile-components'importmessagesfrom'./messages.json';import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'importrouterfrom'./router'constapp=createApp(App)VuersatileInit(app,{locale:'en',// set localemessages:{en:messages// set locale messages}});app.use(createPinia())app.use(router)app.mount('#app')Now we can use our components wherever we want:
import{Card,Tooltip,LockedIcon,TooltipInfo,Form,InputText,InputNumber,InputPassword,ToggleSwitch,SegmentedControl,Checkbox,InputTextarea,RadioButtonGroup,InputSelect,InputMultiSelect}from'vuersatile-components';{"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" }}