Installation - Vite.js

Installation

1 Create a project

Create a new Vite.js + Vue.js application using the npm init command below or using the Vite.js guide, and follow the instructions provided by the installation wizard.

npm init vue 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
3 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');
4 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%;
}
5 Enjoy using Inkline

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