Installation - Nuxt.js

Install Inkline for any application created using Nuxt.js.

Installation

1 Create a project

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

npx nuxi init my-nuxt-app

cd my-nuxt-app

npm install
2 Install Inkline and dependencies

Install and save Inkline as a project dependency.

npm install --save @inkline/inkline @inkline/nuxt

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 nuxt.config.ts or nuxt.config.js file and configure your application to use Inkline. Inkline components will be imported automatically as needed.

import { defineNuxtConfig } from 'nuxt3';

export default defineNuxtConfig({
    modules: [
        '@inkline/nuxt'
    ],
    inkline: {
        // Plugin options (optional)
    }
});
4 Configure your design

Next, open your app.vue file and add the style block below to configure Inkline’s CSS Variables. Learn more about the Design System.

<style lang="scss">
@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

:root {
    --color--primary--h: 195deg;
    --color--primary--s: 77%;
    --color--primary--l: 39%;
}
</style>
5 Enjoy using Inkline

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