@inkline/nuxt NPM

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