Join the Nuxt Team at Frontend Nation 4-7 June.
52.3K

inkline
inkline

Nuxt Module for Inkline, the intuitive UI UX DX Components library for Vue.js 3 Design Systems.

546 downloads
2 stars
alexgrozavalexgrozav

Inkline

@inkline/plugin

The easiest and fastest way to use Inkline with your favorite development environment. We officially support integrations with Nuxt.js, Vite.js, and Webpack.js.


Homepage · Documentation · Storybook · Issue Tracker


npm version Downloads Discord



Table of contents

Installation

npm i -S @inkline/plugin @inkline/inkline@next

Configuration

Create an inkline.config.ts file and override configuration as needed:

import { defineConfig } from '@inkline/config';

export default defineConfig({
    theme: {
        default: {
            color: {
                primary: '#178ab0'
            }
        }
    }
});

Visit Configuration Reference for details.

Integrations

Vite.js

Add @inkline/plugin/vite to your vite.config.ts file's plugins.

import { defineConfig } from 'vite';
import { inkline } from '@inkline/plugin/vite';

export default defineConfig({
    plugins: [
        inkline()
    ]
});

Optionally, configure the integration with your preferred options:

import { defineConfig } from 'vite';
import { inkline } from '@inkline/plugin/vite';

export default defineConfig({
    plugins: [
        inkline({
            configFile: resolve(process.cwd(), 'inkline.config.ts'),
            outputDir: resolve(__dirname, 'src/css/variables'),
            extName: '.scss'
        })
    ]
});

Webpack.js

Add @inkline/plugin/vite to your webpack.config.js file's plugins.

const inkline = require('@inkline/plugin/webpack');

module.exports = {
    plugins: [
        inkline()
    ]
};

Optionally, configure the integration with your preferred options:

const { resolve } = require('path');
const inkline = require('@inkline/plugin/webpack');

module.exports = {
    plugins: [
        inkline({
            configFile: resolve(process.cwd(), 'inkline.config.ts'),
            outputDir: resolve(__dirname, 'src/css/variables'),
            extName: '.scss'
        })
    ]
};

Nuxt.js

Add @inkline/plugin/nuxt to your nuxt.config.ts file's modules.

export default defineNuxtConfig({
    modules: ['@inkline/plugin/nuxt']
});

Optionally, configure the integration with your preferred options:

import { resolve } from 'path';

export default defineNuxtConfig({
    modules: ['@inkline/plugin/nuxt'],
    inkline: {
        /**
         * @inkline/plugin 
         * @description provides import specific options
         */
         
        import: {
            mode: 'global', // Import mode: 'global' | 'auto'
            styles: true,   // Import styles using the module
            scripts: true,  // Import scripts using the module
            utilities: true // Import utility classes using the module
        },
        
        /**
         * @inkline/config
         * @description provides configuration file specific options
         */
         
        configFile: resolve(process.cwd(), 'inkline.config.ts'),
        outputDir: resolve(__dirname, 'src/css/variables'),
        extName: '.scss',
        
        /**
         * @inkline/inkline
         * @description provides configuration file specific options
         */
         
        globals: {
            color: '',                         // Default color variant
            colorMode: 'system',               // Default color mode: 'system' | 'light' | 'dark' | string
            colorModeStrategy: 'localStorage', // Default color mode startegy: 'localStorage' | string
            componentOptions: {},              // Component specific global overrides
            locale: 'en',                      // Default translation
            size: '',                          // Default size variant
            validateOn: ['input', 'blur']     // Default validation events
        } 
    }
});

Bugs and feature requests

Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Community

Get updates on Inkline's development and chat with the project maintainers and community members.

  • Follow @inkline on Twitter.
  • Join Inkline on Discord.
  • Developers should use the keyword inkline on packages which modify or add to the functionality of Inkline when distributing through npm or similar delivery mechanisms for maximum discoverability.

Releases

Previous releases and their documentation are also available for download.

Versioning

For increased transparency and backward compatibility, Inkline is maintained under the Semantic Versioning guidelines.

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

Contributing

Please read through our contributing guidelines. There you can find directions for opening issues, feature requests, coding standards, and how to setup a local development environment.

Copyright and license

Code copyright 2022-Present Inkline Plugin Authors. Code released under the ISC License.