UnoCSS Preset Installation - Nuxt

Install the Inkline Preset for UnoCSS in any Nuxt application.

Installation

1 Install dependencies

npm install -D unocss @unocss/nuxt @inkline/unocss

2 Create Configuration File

Create a uno.config.ts file and add the Inkline preset to it.

import { defineConfig } from 'unocss';
import { createPreset } from '@inkline/unocss';

export default (async () => {
    const presetInkline = await createPreset();
    
    return defineConfig({
        presets: [presetInkline]
    });
})();

If you're using a custom Inkline config file path, make sure to provide it as an options argument to the createPreset() function.

3 Add UnoCSS to your Nuxt Configuration

Next, open your nuxt.config.ts file and make the following changes:

set utilities to false in your Inkline module config
add @unocss/nuxt to the modules array

import { resolve } from 'path';

export default defineNuxtConfig({
    modules: [
        '@inkline/plugin/nuxt',
        '@unocss/nuxt'
    ],
    inkline: {
        import: {
            utilities: false
        }
    }
});

4 Enjoy on-demand utility classes!

That's it! You can now enjoy to ease and efficiency of on-demand utility classes in your Inkline project.