Installation - Nuxt.js
Install Inkline for any application created using Nuxt.js.
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 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. Inkline components will be imported automatically as needed.
import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
modules: [
'@inkline/nuxt'
],
inkline: {
// Plugin options (optional)
}
});
4 Configure your design
Next, open your app.vue
file and add the style block below to configure Inkline’s CSS Variables. Learn more about the Design System.
<style lang="scss">
@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';
: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.