We just released Vuestic Admin 3.0 🤗
🔥🔥🔥 Hire us

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
#

paramstypeDescription
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.