Plugin Options

Make Inkline your own by changing its many global configuration options.

You can configure some of Inkline’s behaviour globally using the config field of the Vue Plugin integration. Here are the default configuration options:

app.use(Inkline, {
    components: {},
    icons: {},
    colorMode: 'system',
    locale: 'en',
    validateOn: ['input', 'blur'],
    color: '',
    size: '',
    routerComponent: 'router-link',
    componentOptions: {}
});

components

Type: object
Default: {}

Usage:

import { IButton } from '@inkline/inkline/components';

app.use(Inkline, {
    components: {
        IButton
    }
});

colorMode

Type: 'system' | 'light' | 'dark' | string
Default: 'system'
Usage:
```
app.use(Inkline, {
    colorMode: 'system'
});
```
Sets the preferred color mode to the chosen option. When set to 'system', it will use prefers-color-scheme: dark to determine light or dark mode.

locale

Type: 'en' | string
Default: 'en'
Usage:
```
app.use(Inkline, {
    locale: 'en'
});
```
Sets the locale to be used for generic messages such as validation errors.

validateOn

Type: Array<'input' | 'blur' | string>
Default: ['input', 'blur']

Usage:

app.use(Inkline, {
    validateOn: ['blur']
});

Sets the events that trigger the form validation.

color

Type: 'light' | 'dark' | string
Default: ''
Usage:
```
app.use(Inkline, {
    color: ''
});
```
Sets the default color property value to use for components. When left empty, the prop default value will change from light to dark according to the chosen colorMode.

size

Type: 'sm' | 'md' | 'lg' | string
Default: ''
Usage:
```
app.use(Inkline, {
    size: ''
});
```
Sets the default size property value to use for components. When left empty, the prop default value will fallback to md (medium) size.

routerComponent

Type: string
Default: 'router-link'
Usage:
```
app.use(Inkline, {
    routerComponent: 'router-link'
});
```
Sets the routing component to be used for Linkable components such as <i-button>, <i-list-group-item>, <i-nav-item> and <i-navbar-brand>.

componentOptions

Type: object
Default: {}

Usage:

app.use(Inkline, {
    componentOptions: {
        IButton: {
            color: 'primary',
            size: 'lg'
        }
    }
});

Used to override the color and size prop default values of specific components.