- 💪 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"]
}
}- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Chip
- Collapse
- Date picker
- Datetime picker
- Dialogs
- Divider
- Dropdown
- Images
- Input
- List
- Loading
- Navbar
- Notification
- Number Input
- Pagination
- Popup
- Progress
- Radio
- Select
- Sidebar
- Slider
- Steps
- Switch
- Table
- Tabs
- Textarea
- Tooltip
- Upload
- Time picker
- 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.