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

• https://grozav.com
• https://twitter.com/alexgrozav
• https://facebook.com/alexgrozav
• https://github.com/alexgrozav

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

Copyright and license

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