inkline
Nuxt Module for Inkline, the intuitive UI UX DX Components library for Vue.js 3 Design Systems.
@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
Table of contents
- Installation
- Configuration
- Integrations
- Bugs and feature requests
- Contributing
- Community
- Releases
- Versioning
- Creator
- Copyright and license
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
- 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. 💖
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.