Vuesax Alpha - Vue.js 3 UI library

💪 Vue 3 Composition API
🔥 Written in TypeScript

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/vuesax.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

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 ❤️ project template.

ThatCoders/vuesax-alpha