Chakra UI Vue | VueAutoImport module

Usage no npm install needed!

<script type="module">
  import chakraUiVueAutoImport from 'https://cdn.skypack.dev/@chakra-ui/vue-auto-import';



If you use Vite, you can use this package to auto import components for you so that you needn't manually import components from Chakra UI Vue that you want to consume.

This package depends on the unplugin-vue-components to help resolve components from the template. @chakra-ui/vue-auto-import exports a componentResolverFunction that will identify Chakra UI Vue components and resolve them for you.


yarn add @chakra-ui/vue-auto-import && yarn add -D unplugin-vue-components
# or
npm i @chakra-ui/vue-auto-import && npm install --dev unplugin-vue-components


// In `vite.config.ts` file

import { defineConfig } from 'vite'
import ComponentsPlugin from 'unplugin-vue-components'
import { componentResolver } from '@chakra-ui/vue-auto-import'

export default defineConfig({
  plugins: [
      customComponentResolvers: [componentResolver]

That's it! In your template, you can use it as follows:

  <c-alert status="info" mb="3">
    <c-alert-title> Info alert </c-alert-title>
    <c-alert-description> Something just happened </c-alert-description>