chakra-loader
v1.0.3
Published
Official webpack loader for @chakra-ui/vue
Downloads
979
Maintainers
Readme
Features
✅ Automatically import only used Chakra components ✅ Preserves tree-shaking of Chakra components ✅ Better development experience
Installation
With Yarn:
yarn add chakra-loader -D
With NPM:
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
/* webkack.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
/* 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 at 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>
Credits
This project was largely inspired by the great work done in amazing Vue projects like nuxt/components
and vuetify-loader
.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!