Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuesax-alpha/vuesax-alpha
Vuesax Alpha - Vuejs 3 UI Library Components
https://github.com/vuesax-alpha/vuesax-alpha
javascript typescript vue vuejs vuesax vuesax-alpha
Last synced: 5 days ago
JSON representation
Vuesax Alpha - Vuejs 3 UI Library Components
- Host: GitHub
- URL: https://github.com/vuesax-alpha/vuesax-alpha
- Owner: vuesax-alpha
- License: mit
- Created: 2022-11-09T10:04:31.000Z (about 2 years ago)
- Default Branch: dev
- Last Pushed: 2024-09-09T17:55:10.000Z (4 months ago)
- Last Synced: 2024-10-17T18:26:27.583Z (3 months ago)
- Topics: javascript, typescript, vue, vuejs, vuesax, vuesax-alpha
- Language: Vue
- Homepage: https://vuesax-alpha.vercel.app/
- Size: 21.2 MB
- Stars: 167
- Watchers: 9
- Forks: 14
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Vuesax Alpha - Vue.js 3 UI library
- đĒ Vue 3 Composition API
- đĨ Written in TypeScript
English | [įŽäŊä¸æ](./README.zh-CN.md)
# Getting Started
## Try with vuesax-next (vuesax v4)
About 90% of the api in this version works fine. This version references to [Vuesax documentaion](https://vuesax.com/)
You can try with tag `old` from npm
```sh
# 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
```js
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](https://vuesax.com/) to try it
## New version - Vuesax-alpha
The documentation of this version is different from the above version, see the [VuesaxAlpha doucmentation](https://vuesax-alpha.vercel.app/)
```sh
# Choose a package manager you like.
# NPM
$ npm install vuesax-alpha
# Yarn
$ yarn add vuesax-alpha
# pnpm
$ pnpm install vuesax-alpha
```
### Usage
#### Full import
```ts
// 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
```
If you want to toggle it, i recommend [useDark | VueUse](https://vueuse.org/core/usedark/).
#### Volar support
If you use volar, please add the global component type definition to compilerOptions.types in tsconfig.json.
```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](https://vuesax.com) to Vuesax Alpha.
You can find the breaking change list here: [Breaking Change List (Updating)](#).
---
Vuesax Alpha is open source software licensed as
[MIT](https://github.com/vuesax-alphax/vuesax-alpha/blob/main/LICENSE).
---
This project is built based on the [Element Plus :heart: ](https://github.com/element-plus/element-plus) project template.