@vuesax-alpha/nightly

• 💪 Vue 3 Composition API
• 🔥 Written in TypeScript

English | 简体中文

Getting Started

Try with vuesax-next (vuesax v4)

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@old

And import it to use

import { createApp } from 'vue'
import './style.css'
import vuesax from 'vuesax-alpha'
import 'vuesax-alpha/dist/index.css'

import App from './App.vue'

createApp(App).use(vuesax).mount('#app')

Then, see the vuesax-next doucmentation to try it

New version - Vuesax-alpha

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

Usage

Full import

// 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')

Dark theme

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.

Volar support

If you use volar, please add the global component type definition to compilerOptions.types in tsconfig.json.

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["vuesax-alpha/global"]
  }
}

Components vuesax-next vs vuesax-alpha

• 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

Breaking change list

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 :heart: project template.