{"id":16259732,"url":"https://github.com/vuesax-alpha/vuesax-alpha","last_synced_at":"2025-04-05T05:03:23.709Z","repository":{"id":142926190,"uuid":"563775018","full_name":"vuesax-alpha/vuesax-alpha","owner":"vuesax-alpha","description":"Vuesax Alpha - Vuejs 3 UI Library Components","archived":false,"fork":false,"pushed_at":"2024-09-09T17:55:10.000Z","size":22201,"stargazers_count":167,"open_issues_count":5,"forks_count":14,"subscribers_count":9,"default_branch":"dev","last_synced_at":"2024-10-17T18:26:27.583Z","etag":null,"topics":["javascript","typescript","vue","vuejs","vuesax","vuesax-alpha"],"latest_commit_sha":null,"homepage":"https://vuesax-alpha.vercel.app/","language":"Vue","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/vuesax-alpha.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["tranthinh-coding"],"patreon":null,"open_collective":"vuesax-alpha","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2022-11-09T10:04:31.000Z","updated_at":"2024-10-14T02:09:21.000Z","dependencies_parsed_at":"2024-02-04T11:44:19.488Z","dependency_job_id":"d6d8aa05-8a03-4b8c-b3bd-d04304455126","html_url":"https://github.com/vuesax-alpha/vuesax-alpha","commit_stats":{"total_commits":710,"total_committers":6,"mean_commits":"118.33333333333333","dds":"0.036619718309859106","last_synced_commit":"c27171d280f19b0ebc8e7a47897b8c1958575cbb"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuesax-alpha%2Fvuesax-alpha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuesax-alpha%2Fvuesax-alpha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuesax-alpha%2Fvuesax-alpha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuesax-alpha%2Fvuesax-alpha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuesax-alpha","download_url":"https://codeload.github.com/vuesax-alpha/vuesax-alpha/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289409,"owners_count":20914464,"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":["javascript","typescript","vue","vuejs","vuesax","vuesax-alpha"],"created_at":"2024-10-10T16:04:39.603Z","updated_at":"2025-04-05T05:03:23.693Z","avatar_url":"https://github.com/vuesax-alpha.png","language":"Vue","funding_links":["https://github.com/sponsors/tranthinh-coding","https://opencollective.com/vuesax-alpha"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eVuesax Alpha - Vue.js 3 UI library\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/vuesax-alpha\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vuesax-alpha.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/vuesax-alpha?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/vuesax-alpha.svg\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n- 💪 Vue 3 Composition API\n- 🔥 Written in TypeScript\n\n\u003cdiv align=\"center\"\u003e\n\nEnglish | [简体中文](./README.zh-CN.md)\n\n\u003c/div\u003e\n\n# Getting Started\n\n## Try with vuesax-next (vuesax v4)\n\nAbout 90% of the api in this version works fine. This version references to [Vuesax documentaion](https://vuesax.com/)\n\nYou can try with tag `old` from npm\n\n```sh\n# Choose a package manager you like.\n\n# NPM\n$ npm install vuesax-alpha@old\n\n# Yarn\n$ yarn add vuesax-alpha@old\n\n# pnpm\n$ pnpm install vuesax-alpha@old\n```\n\nAnd import it to use\n\n```js\nimport { createApp } from 'vue'\nimport './style.css'\nimport vuesax from 'vuesax-alpha'\nimport 'vuesax-alpha/dist/index.css'\n\nimport App from './App.vue'\n\ncreateApp(App).use(vuesax).mount('#app')\n```\n\nThen, see the [vuesax-next doucmentation](https://vuesax.com/) to try it\n\n## New version - Vuesax-alpha\n\nThe documentation of this version is different from the above version, see the [VuesaxAlpha doucmentation](https://vuesax-alpha.vercel.app/)\n\n```sh\n# Choose a package manager you like.\n\n# NPM\n$ npm install vuesax-alpha\n\n# Yarn\n$ yarn add vuesax-alpha\n\n# pnpm\n$ pnpm install vuesax-alpha\n```\n\n### Usage\n\n#### Full import\n\n```ts\n// main.ts\nimport { createApp } from 'vue'\nimport Vuesax from 'vuesax-alpha'\n\n// style\nimport 'vuesax-alpha/dist/index.css'\n// vuesax darkmode\nimport 'vuesax-alpha/theme-chalk/dark/css-vars.css'\n\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(Vuesax)\napp.mount('#app')\n```\n\n#### Dark theme\n\nTo enable it, you can create a switch to toggle `dark` class of html.\n\nIf you only need dark mode, just add dark class for html.\n\n```html\n\u003chtml class=\"dark\"\u003e\n  \u003chead\u003e\u003c/head\u003e\n  \u003cbody\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf you want to toggle it, i recommend [useDark | VueUse](https://vueuse.org/core/usedark/).\n\n#### Volar support\n\nIf you use volar, please add the global component type definition to compilerOptions.types in tsconfig.json.\n\n```json\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    // ...\n    \"types\": [\"vuesax-alpha/global\"]\n  }\n}\n```\n\n## Components vuesax-next vs vuesax-alpha\n\n- [x] Alert\n- [x] Avatar\n- [x] Badge\n- [ ] Breadcrumb\n- [x] Button\n- [x] Card\n- [x] Checkbox\n- [ ] Chip\n- [ ] Collapse\n- [ ] Date picker\n- [ ] Datetime picker\n- [x] Dialogs\n- [ ] Divider\n- [ ] Dropdown\n- [ ] Images\n- [x] Input\n- [ ] List\n- [x] Loading\n- [x] Navbar\n- [x] Notification\n- [x] Number Input\n- [x] Pagination\n- [x] Popup\n- [ ] Progress\n- [x] Radio\n- [x] Select\n- [x] Sidebar\n- [ ] Slider\n- [ ] Steps\n- [x] Switch\n- [x] Table\n- [ ] Tabs\n- [ ] Textarea\n- [x] Tooltip\n- [ ] Upload\n- [ ] Time picker\n- [x] Time select\n\n## Breaking change list\n\nSome APIs is not stable right now, and here's also a full list about how to get upgraded from [Vuesax](https://vuesax.com) to Vuesax Alpha.\n\nYou can find the breaking change list here: [Breaking Change List (Updating)](#).\n\n---\n\nVuesax Alpha is open source software licensed as\n[MIT](https://github.com/vuesax-alphax/vuesax-alpha/blob/main/LICENSE).\n\n---\n\nThis project is built based on the [Element Plus :heart: ](https://github.com/element-plus/element-plus) project template.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuesax-alpha%2Fvuesax-alpha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvuesax-alpha%2Fvuesax-alpha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuesax-alpha%2Fvuesax-alpha/lists"}