Skip to content

Salesforce Lightning Design System framework for Vue.js 3

License

Notifications You must be signed in to change notification settings

marceloatg/vuetning

Repository files navigation

Vuetning vuetning NPM downloads gzip size

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

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.