chore: added plugin options file

Author: codebender828

jest.config.js

@@ -17,7 +17,7 @@ module.exports = {
     '^@/(.*)$': '<rootDir>/$1',
     '@chakra-ui/theme-vue': require.resolve('./packages/chakra-ui-theme/src/index.js'),
     '\\.css$': require.resolve('./tests/test-utils/style-mock.js'),
-    'breadstick': require.resolve('./tests/test-utils/module-mock.js')
+    breadstick: require.resolve('./tests/test-utils/module-mock.js')
   },
   snapshotSerializers: [
     'jest-serializer-vue'

packages/chakra-ui-docs/components/SideNavContent.vue

@@ -3,7 +3,7 @@
     p="3"
     :color="colorMode === 'light' ? 'gray.600': 'whiteAlpha.700'"
   >
-    <CHeading size="xs" color="gray.400" letterSpacing="wide" mb="2" textTransform="uppercase">
+    <CHeading size="xs" color="gray.400" letter-spacing="wide" mb="2" text-transform="uppercase">
       Getting Started
     </CHeading>
     <CBox v-for="(link, index) in topNavLinks" :key="`${index}-getting-started`">
@@ -22,15 +22,22 @@
         rounded="md"
         :bg="$route.path === link.path ? 'vue.50' : 'transparent'"
         :color="$route.path === link.path ? 'vue.700' : 'inherit'"
-        fontWeight="bold"
-        fontSize="sm"
-        textDecoration="none"
+        font-weight="bold"
+        font-size="sm"
+        text-decoration="none"
         transition="background-color 0.15s ease-in"
       >
         {{ link.name }}
       </CPseudoBox>
     </CBox>
-    <CHeading size="xs" color="gray.400" letterSpacing="wide" mt="4" mb="2" textTransform="uppercase">
+    <CHeading
+      size="xs"
+      color="gray.400"
+      letter-spacing="wide"
+      mt="4"
+      mb="2"
+      text-transform="uppercase"
+    >
       About Chakra UI Vue
     </CHeading>
     <CBox v-for="(link, index) in aboutNavLinks" :key="`${index}-about-chakra`">
@@ -49,15 +56,22 @@
         rounded="md"
         :bg="$route.path === link.path ? 'vue.50' : 'transparent'"
         :color="$route.path === link.path ? 'vue.700' : 'inherit'"
-        fontWeight="bold"
-        fontSize="sm"
-        textDecoration="none"
+        font-weight="bold"
+        font-size="sm"
+        text-decoration="none"
         transition="background-color 0.15s ease-in"
       >
         {{ link.name }}
       </CPseudoBox>
     </CBox>
-    <CHeading size="xs" color="gray.400" letterSpacing="wide" mt="4" mb="2" textTransform="uppercase">
+    <CHeading
+      size="xs"
+      color="gray.400"
+      letter-spacing="wide"
+      mt="4"
+      mb="2"
+      text-transform="uppercase"
+    >
       Components
     </CHeading>
     <CPseudoBox
@@ -75,9 +89,9 @@
       }"
       d="block"
       rounded="md"
-      fontWeight="bold"
-      fontSize="sm"
-      textDecoration="none"
+      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'"
     >
@@ -94,22 +108,23 @@ import { components as componentLinks } from '../utils/all-routes'
 const topNavLinks = [
   'Getting Started',
   'With Nuxt',
+  'Plugin Options',
   'Principles',
   'Style Props',
   'Theme',
   'Extending Theme',
   'Color Mode',
   'Responsive Styles',
-  'Starters',
-  'Recipes',
-  'Storybook'
+  'Starters'
 ]
 
 const aboutNavLinks = [
   'Why Chakra UI',
   'Accessibility',
   'Constraint Based Design',
-  'Contributing'
+  'Contributing',
+  'Recipes',
+  'Storybook'
 ]
 
 export default {

packages/chakra-ui-docs/docs/plugin-options.mdx

@@ -0,0 +1,8 @@
+import SEO from '../components/SEO'
+
+<SEO
+  title="Chakra Plugin Options"
+  description="How to extend the capabilities of Chakra UI with the plugin"
+/>
+
+# Plugin Options

packages/chakra-ui-docs/docs/with-nuxt.mdx

@@ -15,27 +15,30 @@ With Nuxt.js we need to install the [`@nuxtjs/emotion`](https://github.com/nuxt-
 styles to be generated and injected in the server build.
 
 ```bash
-yarn add @chakra-ui/vue emotion @nuxtjs/emotion
+yarn add @chakra-ui/nuxt @nuxtjs/emotion
 ```
 
-### Plugin setup
+# Register Module
+We then register the Chakra UI module in the `modules` key of our `nuxt.config.js`. [See the Nuxt documentation to learn mroe about modules in Nuxt.js](https://nuxtjs.org/guide/modules)
 
-Create a file in your `plugins/` directory. For this example, we'll call it `chakra.js`. In here
-we shall import Vue and register the plugin.
-
-```js
-// chakra.js
-import Vue from 'vue'
-import Chakra from '@chakra-ui/vue'
-
-Vue.use(Chakra)
-```
-
-We then add the Chakra plugin's file path in the `plugins` key of our `nuxt.config.js`. [See the Nuxt documentation to learn mroe about plugins in Nuxt.js](https://nuxtjs.org/guide/plugins)
+Learn more about the [Chakra plugin options here](/plugin-options)
 
 ```js
 export default {
-  plugins: ['~/plugins/chakra']
+  modules: [
+    '@chakra-ui/nuxt',
+    '@nuxtjs/emotion'
+  ],
+  /**
+   * Add extend the plugin options under the `chakra` key.
+   **/
+  chakra: {
+    extendTheme: {
+      colors: {
+        brand: { /* ... */ }
+      }
+    }
+  }
 }
 ```
 

tests/test-utils/test-utils.js

@@ -4,7 +4,7 @@ import { render } from '@testing-library/vue'
 import icons from '@/packages/chakra-ui-core/src/lib/internal-icons'
 import theme from '@/packages/chakra-ui-core/src/lib/theme'
 
-const defaultProviders = (options) => ({
+const defaultProviders = options => ({
   $chakraTheme: () => theme,
   $chakraColorMode: () => 'light',
   $chakraIcons: icons,