shards-vue

    1.0.7 • Public • Published

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



    Documentation & DemoOfficial Page

    Getting Started

    Getting started with Shards Vue is fairly simple. You can download Shards Vue via the official website, here on GitHub as a release package or by using a package manager such as Yarn or NPM.


    Quick Start

    You can install Shards Vue via Yarn or NPM.

    // Install via Yarn
    yarn add shards-vue
     
    // Install via NPM
    npm i shards-vue

    Module Bundlers

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

    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>

    File Sizes

    You can also run yarn bundlesize at any time to check the compiled file sizes.

    File Name Size (min.gz)
    shards-vue.common.min.js 46.29KB
    shards-vue.esm.min.js 46.24KB
    shards-vue.umd.min.js 39.3KB

    Built Using


    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:

    1. Clone the repository.
    2. Run yarn to install all required dependencies.
    3. Install Vue CLI and the CLI service globally by running: npm i -g @vue/cli @vue/cli-service-global or yarn global add @vue/cli-service-global.
    4. Run yarn watch in order to kickstart the server and run the sandbox with hot reloading.
    5. Refer to the sandbox/Sandbox.vue file for more details.

    Roadmap

    View the roadmap.


    Changelog

    View notable changes.

    Install

    npm i shards-vue

    DownloadsWeekly Downloads

    128

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    5.02 MB

    Total Files

    174

    Last publish

    Collaborators

    • hisk