Global config
#

Global config allows to configure default values for colors, icons and component's props.

Global config consists of icons, colors and components (that also includes all and presets) configs.

You can provide a custom config via createVuestic fabric:

import { createApp } from 'vue'
import { createVuestic } from 'vuestic-ui'

createApp(App)
  .use(createVuestic({
    config: {
      icons: [/* ... */],
      components: {
        /* ... */
        all: { /* ... */ },
        presets: { /* ... */ },
      },
      colors: { /* ... */ },
    },
  }))
  .mount('#app')

Or you can update the configuration partially at the runtime:

import { useGlobalConfig } from 'vuestic-ui'

export default {
  setup () {
    const { mergeGlobalConfig } = useGlobalConfig()

    const setNewLookForOurApplication = () => {
      mergeGlobalConfig({
        icons: [{ name: 'phone', to: 'fas-phone' }],
        components: {
          VaButton: { /* ... */ },
          all: { color: 'secondary' },
          presets: { VaButton: { presetName: { size: 'small' } } },
        },
        colors: { variables: { 'primary': '#ff0', 'secondary': '#d91698' } },
      })
    }

    return { setNewLookForOurApplication }
  }
}

Alternatively, you can substitute the whole configuration object at the runtime with another one:

import { useGlobalConfig } from 'vuestic-ui'

export default {
  setup () {
    const { setGlobalConfig } = useGlobalConfig()

    const setNewLookForOurApplication = () => {
      setGlobalConfig({
        icons: [/*...*/],
        components: {
          /* ... */
          all: { /* ... */ },
          presets: { /*... */ },
        },
        colors: { /*...*/ },
      })
    }

    return { setNewLookForOurApplication }
  }
}

In case you need to access current configuration object, you can use useGlobalConfig composable:

import { useGlobalConfig } from "vuestic-ui";

export default {
  setup() {
    const { globalConfig } = useGlobalConfig();

    console.log(globalConfig.value);

    return { globalConfig };
  },
};

More on configuration
#

Components config

Colors config

Icons config

API
#

params	type	Description
icons	`IconsConfig`	Used to configure icon fonts and aliases.
components	`ComponentsConfig`	Used to globally overwrite props of specific components.
components.all	`Props`	Used to globally set props for all components. If there are no other source of props.
components.presets	`[presetName: string]: Props`	Used to specify named component's props combinations to use them later at the your application.
colors	`ColorsConfig`	Used to define theme colors that components make use of. Here you can redefine default Vuestic UI theme colors.

Global config #

More on configuration #

API #

Global config
#

More on configuration
#

API
#