- 💪 Vue 3 Composition API
- 🔥 Written in TypeScript
English | 简体中文
About 90% of the api in this version works fine. This version references to Vuesax documentaion
You can try with tag old from npm
# Choose a package manager you like.
# NPM
$ npm install vuesax-alpha@old
# Yarn
$ yarn add vuesax-alpha@old
# pnpm
$ pnpm install vuesax-alpha@oldAnd import it to use
import { createApp } from 'vue'
import './style.css'
import vuesax from 'vuesax-alpha'
import 'vuesax-alpha/dist/vuesax.css'
import App from './App.vue'
createApp(App).use(vuesax).mount('#app')Then, see the vuesax-next doucmentation to try it
The documentation of this version is different from the above version, see the VuesaxAlpha doucmentation
# Choose a package manager you like.
# NPM
$ npm install vuesax-alpha
# Yarn
$ yarn add vuesax-alpha
# pnpm
$ pnpm install vuesax-alpha// main.ts
import { createApp } from 'vue'
import Vuesax from 'vuesax-alpha'
// style
import 'vuesax-alpha/dist/index.css'
// vuesax darkmode
import 'vuesax-alpha/theme-chalk/dark/css-vars.css'
import App from './App.vue'
const app = createApp(App)
app.use(Vuesax)
app.mount('#app')To enable it, you can create a switch to toggle dark class of html.
If you only need dark mode, just add dark class for html.
<html class="dark">
<head></head>
<body></body>
</html>If you want to toggle it, i recommend useDark | VueUse.
If you use volar, please add the global component type definition to compilerOptions.types in tsconfig.json.
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["vuesax-alpha/global"]
}
}- [x] Alert
- [x] Avatar
- [ ] Badge
- [ ] Breadcrumb
- [x] Button
- [x] Card
- [x] Checkbox
- [ ] Chip
- [ ] Collapse
- [ ] Date picker
- [ ] Datetime picker
- [x] Dialogs
- [ ] Divider
- [ ] Dropdown
- [ ] Images
- [x] Input
- [ ] List
- [x] Loading
- [x] Navbar
- [x] Notification
- [x] Number Input
- [x] Pagination
- [x] Popup
- [ ] Progress
- [x] Radio
- [x] Select
- [x] Sidebar
- [ ] Slider
- [ ] Steps
- [x] Switch
- [x] Table
- [ ] Tabs
- [ ] Textarea
- [x] Tooltip
- [ ] Upload
- [ ] Time picker
- [x] Time select
Some APIs is not stable right now, and here's also a full list about how to get upgraded from Vuesax to Vuesax Alpha.
You can find the breaking change list here: Breaking Change List (Updating).
Vuesax Alpha is open source software licensed as MIT.
This project is built based on the Element Plus ❤️ project template.