shards-vue3

Shards Vue 3 is a free, beautiful and modern Vue 3 UI kit
based on Shards.

Introduction

This package is based on Vue 2 shards-vue version. The components are the exact same, so the Official Documentation is still useful. However this package contains a lot of improvements such as:

• Vue 3 compatibility
• Updated packages and less vulnerabilities
• Webpack build included
• Bug fixes
• Smaller bundle size

Installation

// If using NPM
npm install --save shards-vue3

// If using Yarn
yarn add shards-vue3

Module Bundlers

If you are using a module bundler such as Webpack, you can include the entire Shards Vue library inside your project.

import { createApp } from 'vue'
import ShardsVue from 'shards-vue3'

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

const app = createApp({ });
app.use(ShardsVue);
app.mount('#app')

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 { createApp } 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-vue3/src/components'
const app = createApp({ });
app.use(Button);
app.mount('#app')

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>

Build

$ npm run build

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

If you'd like to fix a bug or work on a feature, make sure to follow the steps below in order to setup the development environment on your local machine:

• Clone the repository.
• Run npm install to install all required dependencies.
• Run npm run sandbox in order to kickstart the server and run the sandbox with hot reloading.
• Refer to the sandbox/Sandbox.vue file for more details.