Getting Started

Shards Vue is really easy to get started with. Make sure to follow the guide below to get a better understanding about some of the decisions behind Shards Vue and how to use it to kick-start your next project.

Note: This page is currently a work in progress.

Installation

If you are using a module bundler such as Webpack or Rollup, you can install Shards Vue via Yarn or NPM and import Shards Vue directly into your project.

// Install via Yarn
yarn add shards-vue

// Install via NPM
npm i shards-vue

Module Bundlers

You can register the entire UI kit as a Vue plugin in your app's entry point:

import Vue from 'vue'
import ShardsVue from 'shards-vue'

// Import base styles (Bootstrap and Shards)
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'

Vue.use(ShardsVue);

Registering Components as Vue Plugins

If you'd like to register only certain components as Vue plugins, make sure to import just the component you'd like to use.

import Vue from 'vue'

// Import base styles (Bootstrap and Shards)
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'

import { Button } from 'shards-vue/src/components'
Vue.use(Button)

Importing Single File Components

Importing single file components is also possible.

<template>
    <d-button @click="handleClick">Click Me!</d-button>
</template>

<script>
import dButton from 'shards-vue/src/components/button/Button'

export default {
    components: {
        dButton
    },
    methods: {
        handleClick() {
            alert('You just clicked me!')
        }
    }
}
</script>

Naming Decisions

You will notice that all components are prefixed with <d-{name}>. The reason behind this decision is to provide a consistent naming experience across all existing and future products from DesignRevision.