vuesax-alpha

v0.2.0-beta.79

Published

3 months ago

A Component Library for Vue 3

Downloads

6,804

0High
0Medium
0Low

tt010212

vuesax-alpha vuesax component library ui framework ui vue

💪 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/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

[x] Alert
[x] Avatar
[x] 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

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme