Start

Three ways to install and use buval

Icons

Several components uses icons

Buval using Font Awesome Pro as default Icons and use FA Pack .fal as default .fa
with note FA: Pack light using for global and solid using for Form.

1

NPM or Yarn (recommended)

After creating a project with vue-cli or custom-made (usually Webpack)

Installation

// with npm
npm install @apolokak/buval

// with yarn
yarn add @apolokak/buval
Usage
Full bundle (recommended)
import Vue from 'vue'
import Buval from '@apolokak/buval'
import '@apolokak/buval/dist/buval.css'

Vue.use(Buval)
Individual components as Vue plugins
import Vue from 'vue'
import { Table, Input } from '@apolokak/buval'
import '@apolokak/buval/dist/buval.css'

Vue.use(Table)
Vue.use(Input)

2

Standalone

Using CDN or downloading files to serve local

Installation

Just download or use these as CDN:

Usage example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/@apolokak/buval/dist/buval.min.css">
</head>

<body>
    <div id="app">
        <!-- Buval components goes here -->
    </div>

    <script src="https://unpkg.com/vue"></script>
    <!-- Full bundle -->
    <script src="https://unpkg.com/@apolokak/buval/dist/buval.min.js"></script>

    <!-- Individual components -->
    <script src="https://unpkg.com/@apolokak/buval/dist/components/table"></script>
    <script src="https://unpkg.com/@apolokak/buval/dist/components/input"></script>

    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

3

Nuxt.js

Using a Nuxt.js module to keep things easier

Installation

// with npm
npm install @apolokak/nuxt-buval

// with yarn
yarn add @apolokak/nuxt-buval

Usage

Add nuxt-buval to modules section of nuxt.config.js: 

{
    modules: [
        // Simple usage
        'nuxt-buval',

        // Or you can customize
        ['nuxt-buval', { css: false }],
    ]
}