Morioh
Login
Asmait Ermias

Asmait Ermias

4 years ago

Salesforce Lightning Design System framework for Vue.js 2

Vuetning

Introduction

Vuetning is a Salesforce Lightning Design System framework for Vue.js 2…

Components

Browser Support

Vuetning is being developed in recent versions of Chrome. Support for Safari, Firefox, Edge and Opera will be added in the future.

Quick-start CDN

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css" rel="stylesheet">
  <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.umd.min.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)

Assets

TBD

Download Details:

Author: marceloatg

GitHub: https://github.com/marceloatg/vuetning

#vuejs #vue #javascript #vue-js

Salesforce Lightning Design System framework for Vue.js 2
13.95 GEEK