{"id":15041517,"url":"https://github.com/brugarolas/vuersatile-components","last_synced_at":"2025-07-01T12:37:17.152Z","repository":{"id":151960204,"uuid":"619324853","full_name":"Brugarolas/vuersatile-components","owner":"Brugarolas","description":"A Vue 3 component library with a CSS framework integrated","archived":false,"fork":false,"pushed_at":"2023-05-12T15:21:53.000Z","size":6407,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T08:41:27.006Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://www.andres-brugarolas.com/vuersatile-components/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Brugarolas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-26T22:31:23.000Z","updated_at":"2024-11-04T20:22:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"dba20f31-6c16-4004-8277-13d46bf7dc1f","html_url":"https://github.com/Brugarolas/vuersatile-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brugarolas%2Fvuersatile-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brugarolas%2Fvuersatile-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brugarolas%2Fvuersatile-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brugarolas%2Fvuersatile-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Brugarolas","download_url":"https://codeload.github.com/Brugarolas/vuersatile-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248953037,"owners_count":21188554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-09-24T20:46:11.383Z","updated_at":"2025-04-14T20:23:12.249Z","avatar_url":"https://github.com/Brugarolas.png","language":"Vue","funding_links":["https://www.buymeacoffee.com/brugarolas"],"categories":[],"sub_categories":[],"readme":"[![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/brugarolas)\n\n# Vuersatile Components\n\n## Installation\n\nWe can install `Vuersatile Components` with NPM:\n\n```bash\nnpm install --save vuersatile-components\n```\n\n\n## Usage\n\nFirst, 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:\n\n```js\nimport '../node_modules/vuersatile-components/dist/style.css' // Vite fix\nimport '../node_modules/vuersatile-components/dist/style.scss'\nimport { VuersatileInit } from 'vuersatile-components'\n\nimport messages from './messages.json';\n\nimport { createApp } from 'vue'\nimport { createPinia } from 'pinia'\n\nimport App from './App.vue'\nimport router from './router'\n\nconst app = createApp(App)\n\nVuersatileInit(app, {\n    locale: 'en', // set locale\n    messages: {\n        en: messages // set locale messages\n    }\n});\n\napp.use(createPinia())\napp.use(router)\n\napp.mount('#app')\n```\n\nNow we can use our components wherever we want: \n\n```js\nimport {\n  Card,\n  Tooltip,\n  LockedIcon,\n  TooltipInfo,\n  Form,\n  InputText,\n  InputNumber,\n  InputPassword,\n  ToggleSwitch,\n  SegmentedControl,\n  Checkbox,\n  InputTextarea,\n  RadioButtonGroup,\n  InputSelect,\n  InputMultiSelect\n} from 'vuersatile-components';\n```\n\n## i18n default messages\n\n```json\n{\n    \"FORM\": {\n        \"ERROR\": {\n            \"EMAIL\": \"Invalid email\",\n            \"MAX_VALUE\": \"You must enter a number least than indicated\",\n            \"MIN_CURRENT_DATE\": \"You must enter a date greater than today\",\n            \"MIN_VALUE\": \"You must enter a number greater than indicated\",\n            \"NOT_DATE\": \"Field must be valid date\",\n            \"NOT_EMPTY\": \"Field can't be empty\",\n            \"NOT_EMPTY_NUMBER\": \"You must enter a number\",\n            \"NOT_EQUAL\": \"This information does not match\",\n            \"NOT_INT\": \"Field must be integer\",\n            \"NOT_NUMBER\": \"Field must be number\",\n            \"NOT_VALID_TIME\": \"Field is not a valid time\",\n            \"PHONE\": \"Invalid phone number\",\n            \"MANDATORY_LONG\": \"Field is mandatory\",\n            \"NOT_MAX_LENGTH\": \"Invalid max length\",\n            \"NOT_MIN_LENGTH\": \"Invalid min length\"\n        }\n    },\n    \"GENERIC\": {\n        \"ADD\": \"Add\",\n        \"CLEAR\": \"Clear\",\n        \"CONTINUE\": \"Continue\",\n        \"FROM\": \"From\",\n        \"NO_RESULTS\": \"No results\",\n        \"NO\": \"No\",\n        \"SEARCH\": \"Search\",\n        \"TO\": \"To\",\n        \"YES\": \"Yes\"\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrugarolas%2Fvuersatile-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrugarolas%2Fvuersatile-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrugarolas%2Fvuersatile-components/lists"}