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

Install using @vue/cli:

vue add @inkline/inkline

Vue CLI

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.

Configuration

To configure Inkline 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"]
}

Inkline uses Sass, so you will need to install it as a dependency:
npm install -D node-sass sass-loader

Next, you can import Inkline directly from the source files:

import Vue from 'vue';
import '@inkline/inkline/src/inkline.scss';
import { Inkline } from '@inkline/inkline/src';
import * as components from '@inkline/inkline/src/components';

Vue.use(Inkline, { components });
Tree Shaking

Tree shaking means eliminating code that isn’t actually being used from the final bundle. First, make sure you followed the steps in the Configuration section.

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/inkline.scss';
import { Inkline } from '@inkline/inkline/src';
import { IButton, IForm, IInput } from '@inkline/inkline/src/components';

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

Nuxt.js Module

Inkline comes bundled together with an easy to use Nuxt.js module.

npm install --save @inkline/nuxt
Basic Usage

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

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

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

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

Inkline uses Sass, so you will need to install it as a dependency:
npm install -D node-sass sass-loader

Tree Shaking

You can explicitly import only specific components from Inkline adding them to the components option.

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