@inkline/nuxt
TypeScript icon, indicating that this package has built-in type declarations

3.1.4 • Public • Published

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



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

Copyright and license

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 3.1.4
    128
    • latest

Version History

Package Sidebar

Install

npm i @inkline/nuxt

Weekly Downloads

129

Version

3.1.4

License

ISC

Unpacked Size

10.2 kB

Total Files

9

Last publish

Collaborators

  • alexgrozav