Installation

Install Inkline using your favorite package manager and get access to the latest source code and compiled CSS and JavaScript.

Basic Installation

You can install Inkline using one of the following package managers:

Install using npm:

npm install --save @inkline/inkline

Install using yarn:

yarn add @inkline/inkline

Install using composer:

composer require inkline/inkline
Usage

First, we'll import the core styles, after which we import and register the script files. If you already have your Webpack configuration ready for Vue, importing the framework is as simple as:

import Vue from 'vue';
import '@inkline/inkline/dist/inkline.css';
import Inkline from '@inkline/inkline';

Vue.use(Inkline);

The code above will import and register all of Inkline's components by default.

You're all set! Start using the many components and utilities that Inkline has to offer.

Tree Shaking

Tree shaking means eliminating code that isn’t actually being used from the final bundle. First, we need to make sure that Inkline's source files are being compiled.

When using @vue/cli, add Inkline to the transpiled dependencies array, inside of your vue.config.js file:

// vue.config.js

module.exports = {
    transpileDependencies: ["@inkline/inkline"]
}

Next, to take advantage of tree shaking, you can import Inkline's components individually from the source files:

import Vue from 'vue';
import '@inkline/inkline/src/index.scss';
import { Inkline, IButton, IForm, IInput } from '@inkline/inkline/src/index';

Vue.use(Inkline, {
    components: [
        IButton,
        IForm,
        IInput
    ]
});

Alternatively, you can allow Webpack to handle the tree shaking for you:

import Vue from 'vue';
import '@inkline/inkline/src/index.scss';
import Inkline from '@inkline/inkline/src/index';

Vue.use(Inkline);

To use Sass and tree shaking, you will need to add Sass as a dependency using npm install -D node-sass sass-loader.

Nuxt.js Module

You can easily install Inkline as a Nuxt.js module.

npm install --save @inkline/inkline
Usage

Next, add @inkline/inkline/nuxt to the modules section of your nuxt.config.js. This contains the precompiled CSS and JS by default.

module.exports = {
    modules: [ '@inkline/inkline/nuxt' ]
}
Configuration

Optionally, you can configure your Inkline Nuxt.js Module using the following configuration options:

module.exports = {
    modules: [ '@inkline/inkline/nuxt' ],
    inkline: {
        treeShaking: true,
        scss: true
    }
}

To use the scss and treeShaking options, you will need to add Sass as a dependency using npm install -D node-sass sass-loader.

Tree Shaking

You can explicitly import only specific components from Inkline by setting the components option.

module.exports = {
    modules: [ '@inkline/inkline/nuxt' ],
    inkline: {
        treeShaking: true,
        scss: true,
        components: [ 'IButton', 'IForm', 'IInput' ]
    }
}