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 } });
Register components globally during plugin installation.
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 useprefers-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 chosencolorMode
.
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 tomd
(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
andsize
prop default values of specific components.