\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\n \n \n\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","readmeFilename":"README.md"}
![](\"https://img.shields.io/npm/v/vuesax-alpha.svg\")
\n \n \n ![](\"https://img.shields.io/npm/dm/vuesax-alpha.svg\")
\n \n