The Inkline Nuxt Module package is now a part of @inkline/plugin.
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
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
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
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 |
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>
Awesome work! You can now start using all the features that Inkline has to offer.
-
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; } }
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. 💖
Code copyright 2017-2022 Inkline Authors. Code released under the MIT License.