chore: added plugin options file

Author: codebender828

package.json

@@ -18,6 +18,8 @@
     ]
   },
   "scripts": {
+    "postinstall": "yarn test && yarn build:dev && yarn theme:dev && lerna link",
+    "build:dev": "yarn workspace @chakra-ui/vue run rollup --config rollup.dev.config.js",
     "build": "yarn workspace @chakra-ui/vue build",
     "dev": "yarn workspace @chakra-ui/vue dev",
     "lint": "vue-cli-service lint",
@@ -33,7 +35,7 @@
     "bootstrap": "lerna bootstrap --use-workspaces",
     "deploy-storybook": "storybook-to-ghpages -- --out=.out",
     "now-build-storybook": "build-storybook -o dist/storybook",
-    "docs:dev": "yarn theme:dev && yarn docs-dev",
+    "docs:dev": "yarn docs-dev",
     "theme:dev": "yarn workspace @chakra-ui/theme-vue build",
     "docs-dev": "yarn workspace chakra-ui-docs dev",
     "evalbundle": "bundlesize"
@@ -110,7 +112,7 @@
     "mixpanel-browser": "^2.36.0",
     "node-fetch": "^2.6.0",
     "node-sass": "^4.13.1",
-    "nuxt": "^2.0.0",
+    "nuxt": "^2.12.2",
     "portal-vue": "^2.1.6",
     "prismjs": "^1.19.0",
     "register-service-worker": "^1.6.2",

packages/chakra-ui-docs/docs/contributors.vue

@@ -1,11 +1,4 @@
 import dotenv from 'dotenv-defaults'
-import { stringToUrl } from './utils'
-import pages from './utils/all-routes'
-
-const routes = pages
-  .map(page => {
-    return page === 'Index' ? stringToUrl('') : stringToUrl(page)
-  })
 
 // Configuring dotenv variables.
 dotenv.config({
@@ -15,10 +8,10 @@ dotenv.config({
 
 export default {
   mode: 'universal',
-  srcDir: __dirname,
-  generate: {
-    routes
+  options: {
+    target: 'static'
   },
+  srcDir: __dirname,
   head: {
     title: 'Chakra UI Vue | Simple, Modular and Accessible UI Components for your Vue Applications.',
     meta: [
@@ -48,12 +41,12 @@ export default {
     '@nuxtjs/eslint-module'
   ],
   modules: [
-    ['@nuxtjs/emotion', {
-      ssr: 'critical'
-    }],
-    '@nuxtjs/pwa',
-    '@nuxtjs/router'
+    '@nuxtjs/emotion',
+    '@nuxtjs/pwa'
   ],
+  router: {
+    prefetchLinks: true
+  },
   pwa: {
     meta: {
       name: 'Chakra UI Vue',
@@ -66,20 +59,20 @@ export default {
       iconFileName: 'chakra.png'
     }
   },
+  extensions: [
+    'mdx'
+  ],
   build: {
     transpile: [
       'vue-lorem-ipsum',
+      '@chakra-ui/vue',
       '@chakra-ui/theme-vue'
     ],
+    additionalExtensions: [
+      '.mdx'
+    ],
     extend (config, ctx) {
       config.resolve.alias.vue = 'vue/dist/vue.common'
-      config.module.rules.push({
-        test: /\.mdx$/,
-        use: [
-          'babel-loader',
-          'mdx-vue-loader'
-        ]
-      })
     }
   }
 }

packages/chakra-ui-docs/nuxt.config.js

@@ -6,6 +6,8 @@
   "scripts": {
     "dev": "nuxt",
     "build": "nuxt generate --max_old_space_size=8000",
+    "build-static":"nuxt build --target static",
+    "export": "nuxt export",
     "start": "nuxt start --max_old_space_size=8000",
     "docs:build": "nuxt ",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
@@ -43,7 +45,7 @@
     "mdx-vue-loader": "^1.0.2",
     "mixpanel-browser": "^2.36.0",
     "node-sass": "^4.13.1",
-    "nuxt": "^2.0.0",
+    "nuxt": "^2.12.2",
     "prismjs": "^1.19.0",
     "sass-loader": "^8.0.2",
     "vue": "^2.6.11",

packages/chakra-ui-docs/package.json

@@ -0,0 +1,95 @@
+<template>
+  <c-box>
+    <c-heading>
+      Core contributors
+    </c-heading>
+
+    <c-text my="3">
+      Special thanks to these people that helped contribute towards Chakra UI Vue.
+    </c-text>
+
+    <c-box>
+      <c-box v-for="(person, _i) in contributors" :key="_i" bb="1px solid" border-color="gray.200" p="3">
+        <c-text font-weight="bold" mt="3" font-size="1.3rem">
+          {{ person.name }} {{ person.nationality }}
+        </c-text>
+        <c-text font-style="italic">
+          {{ person.contributions }}
+        </c-text>
+        <c-link
+          font-size="1.5rem"
+          margin-right="3"
+          color="black"
+          :_hover="{ color: 'vue.400' }"
+          is-external
+          :href="person.twitter"
+        >
+          <c-icon name="twitter" />
+        </c-link>
+        <c-link
+          font-size="1.5rem"
+          margin-right="3"
+          color="black"
+          :_hover="{ color: 'vue.400' }"
+          is-external
+          :href="person.github"
+        >
+          <c-icon name="github" />
+        </c-link>
+        <c-link
+          font-size="1.5rem"
+          margin-right="3"
+          color="black"
+          :_hover="{ color: 'vue.400' }"
+          is-external
+          :href="person.website"
+        >
+          <c-icon name="globe-africa" />
+        </c-link>
+      </c-box>
+    </c-box>
+  </c-box>
+</template>
+
+<script>
+import { CBox, CHeading, CText, CLink, CIcon } from '@chakra-ui/vue'
+
+export default {
+  name: 'Contributors',
+  components: {
+    CBox,
+    CHeading,
+    CText,
+    CLink,
+    CIcon
+  },
+  data () {
+    return {
+      contributors: [{
+        name: 'Jonathan Bakebwa',
+        github: 'https://github.com/codebender828',
+        twitter: 'https://twitter.com/codebender828',
+        website: 'https://jbakebwa.dev',
+        contributions: 'Creator & Maintainer',
+        nationality: '🇺🇬'
+      },
+      {
+        name: 'Kelvin Omereshone',
+        github: 'https://github.com/DominusKelvin',
+        twitter: 'https://twitter.com/dominus_kelvin',
+        website: 'https://dominus.dev',
+        contributions: 'Documentation',
+        nationality: '🇳🇬'
+      },
+      {
+        name: 'Mesut Koca',
+        github: 'https://github.com/koca',
+        twitter: 'https://twitter.com/imesutkoca',
+        website: 'https://mesut.dev',
+        contributions: 'Testing & Code',
+        nationality: '🇹🇷'
+      }]
+    }
+  }
+}
+</script>

packages/chakra-ui-docs/docs/accessibility.mdx renamed to packages/chakra-ui-docs/pages/accessibility.mdx

@@ -1,5 +1,5 @@
 <template>
-  <CBox as="main" fontFamily="body">
+  <CBox as="main" font-family="body">
     <SEO
       title="Chakra UI Vue | Simple, Modular and Accessible UI Components for your Vue Applications."
       description="Simple, Modular and Accessible UI Components for your Vue Applications."
@@ -8,16 +8,16 @@
     <CFlex
       as="section"
       py="10"
-      :flexDir="['column', 'column', 'row']"
-      fontFamily="body"
+      :flex-dir="['column', 'column', 'row']"
+      font-family="body"
     >
-      <CGrid :templateColumns="['auto', 'auto', 'repeat(3, 1fr)']" gap="6">
+      <CGrid :template-columns="['auto', 'auto', 'repeat(3, 1fr)']" gap="6">
         <CBox m="3">
-          <CFlex alignItems="center" mb="5">
+          <CFlex align-items="center" mb="5">
             <CFlex
-              justifyContent="center"
+              justify-content="center"
               color="white"
-              alignItems="center"
+              align-items="center"
               mr="5"
               bg="vue.400"
               w="50px"
@@ -26,17 +26,19 @@
             >
               <CIcon size="25px" name="universal-access" />
             </CFlex>
-            <CHeading as="h4" size="md">Accessible</CHeading>
+            <CHeading as="h4" size="md">
+              Accessible
+            </CHeading>
           </CFlex>
           Chakra UI strictly follows WAI-ARIA standards. All components come
           with proper attributes and keyboard interactions out of the box.
         </CBox>
         <CBox m="3">
-          <CFlex alignItems="center" mb="5">
+          <CFlex align-items="center" mb="5">
             <CFlex
-              justifyContent="center"
+              justify-content="center"
               color="white"
-              alignItems="center"
+              align-items="center"
               mr="5"
               bg="vue.400"
               w="50px"
@@ -45,17 +47,19 @@
             >
               <CIcon size="25px" name="palette" />
             </CFlex>
-            <CHeading as="h4" size="md">Themeable</CHeading>
+            <CHeading as="h4" size="md">
+              Themeable
+            </CHeading>
           </CFlex>
           Quickly and easily reference values from your theme throughout your
           entire application, on any component.
         </CBox>
         <CBox m="3">
-          <CFlex alignItems="center" mb="5">
+          <CFlex align-items="center" mb="5">
             <CFlex
-              justifyContent="center"
+              justify-content="center"
               color="white"
-              alignItems="center"
+              align-items="center"
               mr="5"
               bg="vue.400"
               w="50px"
@@ -64,7 +68,9 @@
             >
               <CIcon size="25px" name="cubes" />
             </CFlex>
-            <CHeading as="h4" size="md">Composable</CHeading>
+            <CHeading as="h4" size="md">
+              Composable
+            </CHeading>
           </CFlex>
           Components were built with composition in mind. You can leverage any
           component to create new things.