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

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 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/nuxt'
    ],
    inkline: {
        // Plugin options (optional)
    }
});

Property	Type	Description	Default
inkline.css	Boolean	Enable or disable adding Inkline's stylesheet automatically.	true
inkline.sassVariables	String	Paths to SCSS Variables to prepend before Inkline's stylesheet.
inkline.global	Boolean	Register 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%;
}
</style>

5. Enjoy using Inkline

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

Troubleshooting

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; 
  }
}

Creator

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. 💖