Shards Vue is a free, beautiful, and modern UI kit built on Vue.js. Whether you’re a novice developer or a seasoned pro, getting started with Shards Vue is as easy as pie! In this article, we’ll walk you through the installation process, usage, and troubleshooting tips.

Getting Started

To begin using Shards Vue, you can download it from the official website, grab it as a release package on GitHub, or opt for a package manager like Yarn or NPM.

Quick Start

Install Shards Vue easily with Yarn or NPM by using the commands below:

Install via Yarn
yarn add shards-vue

Install via NPM
npm i shards-vue

Using Shards Vue with Module Bundlers

If you are employing a module bundler like Webpack or Rollup, the following steps show you how to include the Shards Vue library in your project:

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

// Import base styles
import 'bootstrap/dist/css/bootstrap.css';
import 'shards-ui/dist/css/shards.css';

Vue.use(ShardsVue);

Registering Components as Vue Plugins

If you want to register specific components only, you need to import just the ones you want to use.

import Vue from 'vue';
// Import base styles
import 'bootstrap/dist/css/bootstrap.css';
import 'shards-ui/dist/css/shards.css';
import Button from 'shards-vue/src/components/Button';

Vue.use(Button);

Importing Single File Components

Importing single file components is straightforward too. Below is a sample usage:

Checking File Sizes

Keep an eye on compiled file sizes with the command:

yarn bundlesize

This will return sizes for various builds:

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 With

• Shards UI Kit
• noUiSlider by Léon Gersen (WTFPL License)
• vuejs-datepicker

Contributing to Shards Vue

If you’re looking to contribute, please read CONTRIBUTING.md for essential details on our code of conduct and submitting pull requests. To set up a development environment on your local machine, follow these steps:

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

Roadmap and Changelog

For future enhancements, view the roadmap. If you want to know about notable changes, check out the changelog.

Troubleshooting Tips

If you encounter any issues during installation or usage, consider the following troubleshooting steps:

• Ensure that your Vue version is compatible with Shards Vue.
• Check if all your dependencies are properly installed by running yarn or npm install.
• Consult the Shards Vue documentation for any specifics regarding component usage.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.