👨‍🏫 The Mastering Nuxt 3 course is now completed!

Discover the course

Nuxt Module for Inkline, the intuitive UI UX DX Components library for Vue.js 3 Design Systems.

Inkline logo

Inkline - Nuxt Module

Nuxt Module for Inkline, the intuitive UI Components library that gives you the foundation for building high quality, accessible, and customizable Vue.js Design Systems.

Inkline is written and maintained by @alexgrozav.

Homepage · Documentation · Storybook · Playground · Issue Tracker


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 and the Inkline Nuxt 3 Module 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.

import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
modules: [
inkline: {
// Plugin options (optional)
inkline.cssBooleanEnable or disable adding Inkline's stylesheet automatically.true
inkline.sassVariablesStringPaths to SCSS Variables to prepend before Inkline's stylesheet.
inkline.globalBooleanRegister components to be globally available. This disables tree-shaking.true

4. Configure your design

Next, open your app.vue file and add a style block with the content below. Learn more about the Design System.

<style lang="scss">
: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.


  • No "exports" defined in ../my-nuxt-app/node_modules/@nuxt/kit/package.json
    Create a patch file called scripts/patch.js and run it.
    const fs = require('fs');
    const path = require('path');
    const target = path.resolve(__dirname, '../node_modules/@nuxt/kit/package.json');
    const contents = fs.readFileSync(target);
    const replaced = contents.toString().replace(
    '"import": "./lib/index.mjs"',
    '"import": "./lib/index.mjs", "require": "./lib/index.mjs"'
    fs.writeFileSync(target, replaced);
    node scripts/patch.js

    Optionally, add it to your package.json as a postinstall script.
  • Argument of type '{ inkline: {...}; }' is not assignable to parameter of type 'NuxtConfig'
    Create a file called nuxt-schema-shim.d.ts and add the following:
    import type { PluginConfig } from '@inkline/inkline';
    declare module '@nuxt/schema' {
    interface NuxtConfig {
    inkline?: PluginConfig;
    interface NuxtOptions {
    inkline?: PluginConfig;


Alex Grozav

If you use Inkline in your daily work and feel that it has made your life easier, please consider sponsoring me on Github Sponsors. 💖

Code copyright 2017-2022 Inkline Authors. Code released under the MIT License.