vuetning
vuetning copied to clipboard
marceloatg
Salesforce Lightning Design System framework for Vue.js 3
Vuetning 
Introduction
Vuetning is a Salesforce Lightning Design System framework for Vue.js 3, you can find the documentation for vuetning on https://vuetning.com.
Components
| Name | Availability | Coverage | Documentation |
|---|---|---|---|
| Accordion |  |
 |
 |
| Accordion Section | |
|
 |
| Activity Timeline |  |
|
|
| Alert | |
|
|
| App Launcher |  |
|
|
| Avatar | |
|
|
| Avatar Group | |
|
|
| Badge | |
|
|
| Brand Band | |
|
|
| Breadcrumbs | |
|
|
| Builder Header | |
|
|
| Button | |
|
|
| Button Group | |
|
|
| Button Icon | |
|
|
| Card | |
|
|
| Carousel | |
|
|
| Chat | |
|
|
| Checkbox | |
|
|
| Checkbox Button | |
|
|
| Checkbox Button Group | |
|
|
| Checkbox Group | |
|
|
| Checkbox Toggle | |
|
|
| Code Block | |
|
|
| Color Picker | |
|
|
| Combobox | |
|
|
| Counter | |
|
|
| Data Table | |
|
|
| Date Picker | |
|
|
| Datetime Picker | |
|
|
| Docked Composer | |
|
|
| Docked Form Footer | |
|
|
| Docked Utility Bar | |
|
|
| Drop Zone | |
|
|
| Dueling Picklist | |
|
|
| Dynamic Icon | |
|
|
| Dynamic Menu | |
|
|
| Expandable Section | |
|
|
| Expression | |
|
|
| Feed | |
|
|
| Files | |
|
|
| File Selector | |
|
|
| Formatted Date Time | |
|
|
| Global Header | |
|
|
| Global Navigation | |
|
|
| Icon | |
|
|
| Illustration | |
|
|
| Input | |
|
|
| List Builder | |
|
|
| Lookup | |
|
|
| Map | |
|
|
| Media Object | |
|
|
| Menu | |
|
|
| Modal | |
|
|
| Multi Picklist | |
|
|
| Notifications | |
|
|
| Page Header | |
|
|
| Pagination | |
|
|
| Panel | |
|
|
| Path | |
|
|
| Picklist | |
|
|
| Pill | |
|
|
| Popover | |
|
|
| Progress Bar | |
|
|
| Progress Indicator | |
|
|
| Progress Ring | |
|
|
| Prompt | |
|
|
| Publisher | |
|
|
| Radio Button Group | |
|
|
| Radio Group | |
|
|
| Rich Text Editor | |
|
|
| Scoped Notification | |
|
|
| Scoped Tabs | |
|
|
| Setup Assistant | |
|
|
| Slider | |
|
|
| Spinner | |
|
|
| Split View | |
|
|
| Summary Detail | |
|
|
| Tabs | |
|
|
| Text | |
|
|
| Text Area | |
|
|
| Tile | |
|
|
| Time Picker | |
|
|
| Toast | |
|
|
| Tooltip | |
|
|
| Tree | |
|
|
| Tree Grid | |
|
|
| Trial Bar | |
|
|
| Vertical Navigation | |
|
|
| Vertical Tabs | |
|
|
| Virtual Scroller | |
|
|
| Visual Picker | |
|
|
| Welcome Mat | |
|
|
| Wide Radio Group | |
|
|
Browser Support
Vuetning is being developed in recent versions of Chromium based browsers and Safari. Support for Firefox will be added in the future.
Quick-start CDN
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<slds-button brand label="Hello World"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetning/dist/vuetning.es.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
CDN Links
- https://cdn.jsdelivr.net/npm/vuetning/dist/vuetning.umd.min.js
- https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system
Install inside a NPM project
Vuetning is available as npm and yarn packages.
# npm
npm install vuetning
# yarn
yarn add vuetning
Usage
In your main.js, or similar entry point, install vuetning using:
All components
import Vue from 'vue'
import Vuetning from 'vuetning'
Vue.use(Vuetning)
Or use individual components:
import Vue from 'vue'
import {sldsButton, sldsCombobox, sldsModal} from 'vuetning'
Vue.use(sldsButton)
Vue.use(sldsCombobox)
Vue.use(sldsModal)
License
This project is licensed under the terms of the MIT license.
Metadata
25
Stars
7
Forks
Watchers
Owner
marceloatg
Metadata
Salesforce Lightning Design System framework for Vue.js 3