Installation - Vue.js CLI
Install Inkline for any application created using the Vue.js CLI.
Installation
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
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
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
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');
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%;
}
Awesome work! You can now start using all the features that Inkline has to offer.