Auto-importing Chakra UI Vue components

We know that it can be cumbersome to import every single Chakra component you want to use in your Vue templates. Chakra UI offers webpack plugin solution that allows you to directly consume Chakra UI Vue components without manually importing and globally registering all Chakra components.

This provides a better developer experience without sacrificing your application's bundle-size performance.

Installation#

yarn add -D chakra-loader

npm install chakra-loader --save-dev

Usage#

If you're using webpack with Vue CLI or Nuxt.js for your Chakra project, import the ChakraLoaderPlugin from the chakra-loader package and add it to your vue.config.js file.

With Vue CLI#

/* vue.config.js */

const { ChakraLoaderPlugin } = require('chakra-loader')

module.exports = {
  configureWebpack: {
    plugins: [
      new ChakraLoaderPlugin()
    ]
  }
}

With `webpack.config.js`#

/* webpack.config.js */

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { ChakraLoaderPlugin } = require('chakra-loader')

module.exports = {
  // ... other options
  plugins: [
    new VueLoaderPlugin(),
    new ChakraLoaderPlugin()
  ]
}

With Nuxt.js#

As of @chakra-ui/nuxt@0.1.0, you can enable and disable component auto-import using the chakra.config.autoImport: {Boolean} property of your nuxt.config.js file.

This change is only supported for @chakra-ui/nuxt@^0.1.0. We recommend upgrading your Nuxt module version to ^0.1.0.

/* nuxt.config.js */

export default {
  // ...
  chakra: {
    config: {
      /**
       * Setting this value to false disables
       * component auto-import in your Vue templates
       * @type {Boolean}
       **/
      autoImport: true
    }
  }
}

For older versions of @chakra-ui/nuxt, you can enable component auto importing yourself:

/* nuxt.config.js */

import { ChakraLoaderPlugin } from 'chakra-loader'

export default {
  // ...
  build: {
    extend(config) {
      config.plugins.push(
        new ChakraLoaderPlugin()
      )
    }
  }
}

How it works#

ChakraLoaderPlugin will analyse your SFC template during development and at build time, and scan it for all Chakra UI Vue components that you consume in it. The loader will then proceed to automatically import those components and register them while preserving treeshaking.

For example, consider the component below, Component.vue which uses Chakra's CBox and CButton components.

<template>
  <c-box p="3" m="auto" bg="tomato" font-weight="bold" color="white">
    Chakra UI Vue Box
  </c-box>
  <c-button>
    Hello world!
  </c-button>
</template>

Using chakra-loader will yield:

<template>
  <c-box p="3" m="auto" bg="tomato" font-weight="bold" color="white">
    Chakra UI Vue Box
  </c-box>
  <c-button>
    Hello world!
  </c-button>
</template>

<script>
// 👇🏽 Automatically imports and registers
//    the CBox and CButton components from Chakra UI Vue. 🎉

import { CBox, CButton } from '@chakra-ui/vue'

export default {
  name: 'App',
  components: {
    CBox,
    CButton
  }
}
</script>

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!