Module Options - Nuxt

Effortlessly customize Inkline's Configuration using the Nuxt Module options.

Here are the default configuration options:

import { resolve } from 'path';

export default defineNuxtConfig({
    modules: ['@inkline/plugin/nuxt'],
    inkline: {
        /**
         * @inkline/config
         * @description provides configuration file specific options
         */

        configFile: resolve(process.cwd(), 'inkline.config.ts'),
        extName: '.scss',
        outputDir: resolve(__dirname, '.inkline/css'),

        /**
         * @inkline/inkline
         * @description provides configuration file specific options
         */

        globals: {
            color: '',
            colorMode: 'system',
            colorModeStrategy: 'localStorage',
            componentOptions: {},
            locale: 'en',
            size: '',
            validateOn: ['input', 'blur']
        },

        /**
         * @inkline/plugin
         * @description provides import specific options
         */

        import: {
            mode: 'auto',
            scripts: true,
            styles: true,
            utilities: true
        }
    }
});

configFile

  • Type:

    string

  • Default:

    path.resolve(process.cwd(), 'inkline.config.ts')

  • Description:

    Sets the path to the Inkline configuration file, relative to the project root. The default value automatically determines the file extension.

    import { resolve } from 'path';

export default defineNuxtConfig({
    modules: ['@inkline/plugin/nuxt'],
    inkline: {
        configFile: resolve(process.cwd(), 'inkline.config.ts')
    }
});

extName

  • Type:

    '.scss' | '.css'

  • Default:

    .scss

  • Description:

    Sets the extension of the generated CSS Variables files. By default, Inkline requires the .scss extension, but you can generate .css files for your own needs.

    import { resolve } from 'path';

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

globals

  • Type:

    InklinePluginOptions

  • Default:

    {...}

  • Description:

    Used to configure the Inkline Plugin Options.

    import { resolve } from 'path';

export default defineNuxtConfig({
    modules: ['@inkline/plugin/nuxt'],
    inkline: {
        globals: {
            color: '',
            colorMode: 'system',
            colorModeStrategy: 'localStorage',
            componentOptions: {},
            locale: 'en',
            size: '',
            validateOn: ['input', 'blur']
        }
    }
});

import.mode

  • Type:

    'global' | 'auto'

  • Default:

    'auto'

  • Description:

    Sets the component import mode. When using the 'global' mode, all components will be imported globally. When using the 'auto' mode, components will be imported on demand.

    import { resolve } from 'path';

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

import.scripts

  • Type:

    boolean

  • Default:

    true

  • Description:

    Sets whether to import Inkline's scripts. When set to false, you will need to import the scripts manually.

    import { resolve } from 'path';

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

import.styles

  • Type:

    boolean

  • Default:

    true

  • Description:

    Sets whether to import Inkline's styles. When set to false, you will need to import the styles manually.

    import { resolve } from 'path';

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

import.utilities

  • Type:

    boolean

  • Default:

    true

  • Description:

    Sets whether to import Inkline's utilities. When set to false, you will need to import the utilities manually.

    import { resolve } from 'path';

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

outputDir

  • Type:

    string

  • Default:

    path.resolve(process.cwd(), 'inkline.config.ts')

  • Description:

    Sets the output directory for the generated CSS Variables files, relative to the config file. The files are generated using the @inkline/config package.

    import { resolve } from 'path';

export default defineNuxtConfig({
    modules: ['@inkline/plugin/nuxt'],
    inkline: {
        outputDir: resolve(__dirname, 'src/css/variables')
    }
});