Not Particularly Meaningful

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

    Install

    npm i @inkline/nuxt

    DownloadsWeekly Downloads

    348

    Version

    3.1.4

    License

    ISC

    Unpacked Size

    10.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • alexgrozav