docs: add chakra-loader docs tooling

Author: codebender828

website/components/SideNavContent.vue

@@ -67,6 +67,41 @@
         {{ link.name }}
       </CPseudoBox>
     </CBox>
+    <CHeading
+      size="xs"
+      color="gray.400"
+      letter-spacing="wide"
+      mt="4"
+      mb="2"
+      text-transform="uppercase"
+    >
+      Tooling
+    </CHeading>
+    <CPseudoBox
+      v-for="(link, index) in toolingLinks"
+      :key="`${index}-tooling`"
+      as="nuxt-link"
+      :to="link.path"
+      outline="none"
+      p="0.2rem"
+      :_focus="{
+        shadow: 'outline',
+      }"
+      :_hover="{
+        textDecoration: 'none',
+        transform: 'translateX(3px)'
+      }"
+      transition="background-color,transform 0.15s ease-in"
+      d="block"
+      rounded="md"
+      font-weight="bold"
+      font-size="sm"
+      text-decoration="none"
+      :bg="$route.path === link.path ? 'vue.50' : 'transparent'"
+      :color="$route.path === link.path ? 'vue.700' : 'inherit'"
+    >
+      {{ link.name }}
+    </CPseudoBox>
     <CHeading
       size="xs"
       color="gray.400"
@@ -108,7 +143,7 @@
 <script>
 import { CBox, CHeading, CPseudoBox } from '@chakra-ui/vue'
 import { stringToUrl } from '../utils'
-import { components as componentLinks, topNavLinks, aboutNavLinks } from '../utils/all-routes'
+import { components as componentLinks, topNavLinks, aboutNavLinks, toolingLinks } from '../utils/all-routes'
 
 export default {
   name: 'SideNavContent',
@@ -130,15 +165,24 @@ export default {
       return this.$chakraColorMode()
     },
     topNavLinks () {
-      return topNavLinks.map(link => ({ name: link, path: stringToUrl(link) }))
+      return this.parsedLinks(topNavLinks)
     },
     componentLinks () {
-      return componentLinks
-        .filter(link => link !== 'Index')
-        .map(link => ({ name: link, path: stringToUrl(link) }))
+      return this.parsedLinks(
+        componentLinks
+          .filter(link => link !== 'Index')
+      )
     },
     aboutNavLinks () {
-      return aboutNavLinks.map(link => ({ name: link, path: stringToUrl(link) }))
+      return this.parsedLinks(aboutNavLinks)
+    },
+    toolingLinks () {
+      return this.parsedLinks(toolingLinks)
+    },
+    parsedLinks () {
+      return value => Array.isArray(value)
+        ? value.map(link => ({ name: link, path: stringToUrl(link) }))
+        : []
     }
   }
 }

website/pages/auto-import-components.mdx

@@ -0,0 +1,118 @@
+import SEO from '../components/SEO'
+
+<SEO
+  title="Auto-import Chakra components"
+  description="Use the chakra-loader webpack plugin to automatically import and register Chakra components used in your templates"
+/>
+
+# 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 applications bundle-size performance.
+
+
+## Installation
+With Yarn:
+
+```bash
+yarn add chakra-loader -D
+```
+With NPM:
+
+```bash
+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
+```js
+/* vue.config.js */
+
+const { ChakraLoaderPlugin } = require('chakra-loader')
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      new ChakraLoaderPlugin()
+    ]
+  }
+}
+
+```
+### With `webpack.config.js`
+```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
+```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.
+```vue
+<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:
+```vue
+<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>
+```

website/utils/all-routes.js

@@ -79,6 +79,10 @@ export const aboutNavLinks = [
   'Storybook'
 ]
 
+export const toolingLinks = [
+  'Auto-import components'
+]
+
 export const footerLinks = [
   'Contributors'
 ]