Чтобы добавить пользовательский интерфейс Chakra в уже существующий проект Vue, вы можете выполнить следующие действия:

Установите плагин Chakra UI Vue с помощью npm или yarn:

npm install @chakra-ui/vue

или

yarn add @chakra-ui/vue

Зарегистрируйте плагин Chakra UI Vue в файле main.js или любом другом файле, где вы хотите его использовать:

import Vue from 'vue'
import Chakra, { CThemeProvider } from '@chakra-ui/vue'

Vue.use(Chakra)

Vue.component(CThemeProvider.name, CThemeProvider)

Примечание. CThemeProvider — это необязательный компонент, устанавливающий тему для компонентов пользовательского интерфейса Chakra.

Начните использовать компоненты пользовательского интерфейса Chakra в своих компонентах Vue. Вот пример использования компонента Chakra UI Button:

<template>
  <c-button color="blue">Click me</c-button>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

Примечание. В приведенном выше коде префикс «c-» используется для всех компонентов пользовательского интерфейса Chakra.

Вы также можете использовать тему пользовательского интерфейса Chakra, импортировав ее в свои компоненты Vue:

<template>
  <div :style="theme.styles.container">
    This is a Chakra UI container
  </div>
</template>

<script>
import { theme } from '@chakra-ui/vue'

export default {
  name: 'MyComponent',
  data() {
    return {
      theme: theme
    }
  }
}
</script>

Примечание. Вы можете использовать объект темы пользовательского интерфейса Chakra для доступа к цветам, шрифтам и другим элементам дизайна, предоставляемым пользовательским интерфейсом Chakra.

Вот и все! Теперь вы можете начать использовать Chakra UI в уже существующем проекте Vue.