Installation - Vue.js CLI

Install Inkline for any application created using the Vue.js CLI.

Installation

1 Create a project

Create a new Vue.js application using the vue create command below or using the Vue.js CLI guide, and follow the instructions provided by the installation wizard.

npm i -g @vue/cli

vue create my-vue-app

cd my-vue-app 

npm install

2 Install Inkline and dependencies

Install and save Inkline as a project dependency.

npm install --save @inkline/inkline

Inkline uses Sass to pre-process and compile its CSS files. You will need to install it as a development dependency in order to compile the stylesheets.

npm install --save-dev sass sass-loader@10

3 Configure Vue.js CLI

Create a vue.config.js file in your project root and configure it to transpile Inkline.

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

If you opted for creating a TypeScript installation, you will most likely need to install Babel.

vue add babel

4 Configure your project

Open your src/main.js or src/main.ts file and configure your application to use Inkline.

import { createApp } from 'vue';
import App from './App.vue';

import { Inkline, components } from '@inkline/inkline';
import '@inkline/inkline/inkline.scss';

import "./main.scss";

const app = createApp(App);

app.use(Inkline, {
    components
});
    
app.mount('#app');

5 Configure your design

Next, create a new file called src/main.scss and import Inkline. Learn more about the Design System.

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

:root {
    --color--primary--h: 195deg;
    --color--primary--s: 77%;
    --color--primary--l: 39%;
}

6 Enjoy using Inkline

Awesome work! You can now start using all the features that Inkline has to offer.