docs(nuxt): include to auto-import docs

Author: codebender828

packages/chakra-ui-core/src/directives/chakra.directive.js

@@ -63,7 +63,6 @@ export function createServerDirective (theme) {
 export function createClientDirective (theme) {
   function applyClientStyles (el, binding, vnode) {
     const { styleAttrs } = extractChakraAttrs(vnode.data.attrs)
-    // console.log({ styleAttrs, nativeAttrs })
     const className = css(Css(styleAttrs)(theme))
     el.classList.add(className)
     purifyAttrs(el, styleAttrs)

website/components/BottomLink.vue

@@ -60,7 +60,6 @@ export default {
     this.prevName = prev.name
     this.nextPath = next.path
     this.nextName = next.name
-    console.log(this.prevName, this.nextName)
   }
 }
 </script>

website/layouts/default.vue

@@ -93,20 +93,22 @@ export default {
         light: {
           bg: 'rgb(254, 235, 200)',
           color: 'black',
-          borderLeft: '4px solid rgb(221, 107, 32)'
+          borderLeft: '4px solid rgb(221, 107, 32)',
+          rounded: 'md'
         },
         dark: {
           bg: 'rgba(251, 211, 141, 0.16)',
           color: 'inherit',
-          borderLeft: '4px solid rgb(251, 211, 141);'
+          borderLeft: '4px solid rgb(251, 211, 141);',
+          rounded: 'md'
         }
       },
       code: {
         light: {
-          color: 'orange.600'
+          color: 'indigo.500'
         },
         dark: {
-          color: 'rgb(250, 195, 137)'
+          color: 'indigo.100'
         }
       },
       MDXComponents

website/pages/auto-import-components.mdx

@@ -44,7 +44,7 @@ module.exports = {
 ```
 ### With `webpack.config.js`
 ```js
-/* webkack.config.js */
+/* webpack.config.js */
 
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const { ChakraLoaderPlugin } = require('chakra-loader')
@@ -59,12 +59,37 @@ module.exports = {
 ```
 
 ### With Nuxt.js
+As of `@chakra-ui/[email protected]`, 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`.
+
+```js
+/* 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:
+
 ```js
 /* nuxt.config.js */
 
 import { ChakraLoaderPlugin } from 'chakra-loader'
 
 export default {
+  // ...
   build: {
     extend(config) {
       config.plugins.push(
@@ -75,6 +100,8 @@ export default {
 }
 ```
 
+
+
 ## 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.