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](https://github.com/DesignRevision/shards-vue) version. The components are the exact same, so the [Official Documentation](https://designrevision.com/docs/shards-vue) 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
```bash
// 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](https://webpack.js.org/), you can include the entire Shards Vue library inside your project.
```javascript
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.
```javascript
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.
```vue
Click Me!
```
### Build
```
$ npm run build
```
### Contributing
Please read [CONTRIBUTING.md](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 `npm install` to install all required dependencies.
3. Run `npm run sandbox` in order to kickstart the server and run the sandbox with hot reloading.
4. Refer to the `sandbox/Sandbox.vue` file for more details.