{"id":22035615,"url":"https://github.com/sebastianbaar/vue-kaiui","last_synced_at":"2025-07-12T23:34:33.791Z","repository":{"id":42846611,"uuid":"258705081","full_name":"sebastianbaar/vue-kaiui","owner":"sebastianbaar","description":"Vue KaiUI - Vue component library for KaiOS apps.","archived":false,"fork":false,"pushed_at":"2023-09-13T02:49:10.000Z","size":2978,"stargazers_count":16,"open_issues_count":13,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-19T11:54:41.223Z","etag":null,"topics":["component-library","kaios","kaiui","mobile-app","mobile-development","mobile-web","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sebastianbaar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2020-04-25T06:39:14.000Z","updated_at":"2025-06-17T01:51:19.000Z","dependencies_parsed_at":"2025-05-07T19:43:12.371Z","dependency_job_id":"4bff1329-5119-4ab5-b5df-92911993fbba","html_url":"https://github.com/sebastianbaar/vue-kaiui","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/sebastianbaar/vue-kaiui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianbaar%2Fvue-kaiui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianbaar%2Fvue-kaiui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianbaar%2Fvue-kaiui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianbaar%2Fvue-kaiui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sebastianbaar","download_url":"https://codeload.github.com/sebastianbaar/vue-kaiui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianbaar%2Fvue-kaiui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265068642,"owners_count":23706503,"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":["component-library","kaios","kaiui","mobile-app","mobile-development","mobile-web","vue","vuejs"],"created_at":"2024-11-30T10:25:40.834Z","updated_at":"2025-07-12T23:34:33.773Z","avatar_url":"https://github.com/sebastianbaar.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Logo of vue-kaiui](./screenshots/vue-kaios-logo.png)\n\n\u003e **Vue component library for KaiOS apps.**\n\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Components API](#components-api)\n  - [Styles](#styles)\n- [Status](#status)\n  - [Components](#components)\n  - [Navigation](#navigation)\n  - [Typography](#typography)\n  - [Miscellaneous](#miscellaneous)\n- [Styling, Colors, Fonts](#styling-colors-fonts)\n- [Icons](#icons)\n- [Contributing](#contributing)\n\n# Installation\n```\nnpm install vue-kaiui\n```\nIn your `main.js` add\n\n```javascript\nimport Vue from 'vue'\nimport App from './App.vue'\n\nimport VueKaiUI from \"vue-kaiui\"; // !\nVue.use(VueKaiUI) // !\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app')\n```\n\n# Usage\nMost importantly, put all the components in the `\u003ckaiui-content\u003e` root so that KaiUI can manage all the Softkeys and Header design elements for you.\n\n## Components API\n\nSee the [Components API docs](https://github.com/sebastianbaar/vue-kaiui/tree/master/docs/) and the [Sample App](https://github.com/sebastianbaar/sample-vue-kaiui-app) for usage examples.\n\n## Styles\nYou can simply override CSS variables in your styles using the `:root` scope. All theme CSS variables are found [here](https://github.com/sebastianbaar/vue-kaiui/tree/master/src/assets/css/theme.css).\n\n```css\n\u003cstyle\u003e\n\n:root{\n  --primary-color: red; \n  --primary-dark-color: darkred;\n  ...\n  --tabbar-tabs-selected-color: blue;\n  ...\n}\n\n\u003c/style\u003e\n```\n\n# Status\nSee [Contributing](#contributing).\n\n## [Components](https://developer.kaiostech.com/design-guide/ui-component)\n- [x] Header\n- [x] Tab\n- [x] Software Key\n- [x] List Item\n- [x] Separator\n- [x] Checkbox\n- [x] Button\n- [x] Input\n- [x] Multiple-line Input\n- [x] Toast\n- [x] Radio Button (Group)\n- [ ] Progress\n- [ ] Slider (update Design!)\n- [ ] Date/Time Value Selector\n- [x] Dialog / Value Selector / Option Menu\n- [x] Notice\n## [Navigation](https://developer.kaiostech.com/design-guide/basic-navigation)\n- [x] List View\n- [x] Tab View\n- [ ] Grid View\n## [Typography](https://developer.kaiostech.com/design-guide/typography)\n- [x] Fonts\n- [x] Ionicons icons\n## Miscellaneous\n- [ ] [Theming](https://developer.kaiostech.com/getting-started/build-your-first-package-app/sample-code#theme-apps)\n- [ ] [Translation](https://developer.kaiostech.com/getting-started/build-your-first-package-app/sample-code#apps-with-translation--l10n)\n- [ ] [LargeText](https://developer.kaiostech.com/api/largetext)\n- [ ] [Portrait/Landscape Mode](https://developer.kaiostech.com/core-developer-topics/supporting-multiple)\n\n\n# Styling, Colors, Fonts\n\nTypography details can be found [here](https://developer.kaiostech.com/design-guide/typography).\n\nStandardized stylings, colors and fonts are found in the [asset directory](https://github.com/sebastianbaar/vue-kaiui/tree/master/src/assets).\n\n# Icons\n\nVue KaiUI uses the awesome [Ionicons](https://ionicons.com/) icons.\n\nIcons are found in the [asset directory](https://github.com/sebastianbaar/vue-kaiui/tree/master/src/assets).\n\n# Contributing\n\nThere's much work to be done on building out more UI components, writing tests, etc...\n\nPlease look at currently [open issues](https://github.com/sebastianbaar/vue-kaiui/issues?q=is%3Aopen+is%3Aissue) and our [Contributing Guide](https://github.com/sebastianbaar/vue-kaiui/blob/master/CONTRIBUTING.md).\n\nTo build \u0026 test the project run:\n\n`npm install`\n\n`npm run build`\n\nTo build the project and create API docs run:\n\n`npm run release`\n\n---\n\n\u003e Thanks [Adrian Machado](https://github.com/AdrianMachado) for the inspiration. Check out his awesome [KaiUI](https://github.com/AdrianMachado/KaiUI) (React component library for KaiOS apps).\n\n---","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastianbaar%2Fvue-kaiui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebastianbaar%2Fvue-kaiui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastianbaar%2Fvue-kaiui/lists"}