feat: global components (#164)

* feat(lib): register nuxt components:dirs hook

* chore(deps): use nuxt v2.13.x

* chore(example): use global components

* chore(docs): use global components

* docs: add section about global components

* Update docs/package.json

Co-authored-by: Sébastien Chopin <[email protected]>

* docs: update global components

* Update writing.md

* chore: remove commitlint

* docs: update deps

* chore(deps): update

* chore(github): add ci on dev branch

Co-authored-by: Sébastien Chopin <[email protected]>

.github/workflows/ci.yml

@@ -7,6 +7,7 @@ on:
   pull_request:
     branches:
       - master
+      - dev
 
 jobs:
   ci:

docs/components/bases/Dropdown.vue → docs/components/base/Dropdown.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import ClickAway from '../directives/click-away'
+import ClickAway from '~/directives/click-away'
 
 export default {
   name: 'Dropdown',

docs/components/bases/BaseAlert.vue → docs/components/global/bases/BaseAlert.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="alert border-l-4 p-4 mb-4"
-    :class="`alert-${type}`"
-  >
+  <div class="alert border-l-4 p-4 mb-4" :class="`alert-${type}`">
     <div class="flex">
       <div class="flex-shrink-0 self-start pt-1">
         <IconInfo v-if="type === 'info'" class="alert-icon" />

docs/content/en/writing.md

@@ -313,6 +313,20 @@ However, you cannot render
 </my-component>
 ```
 
+#### Global components
+
+Since **v2.0.0** and Nuxt **v2.13.0**, you can now put your components in `components/global/` directory so you don't have to import them in your pages.
+
+```bash
+components/
+  global/
+    Hello.vue
+content/
+  home.md
+```
+
+Then in `content/home.md`, you can use `<hello></hello>` component without having to worry about importing it in your page.
+
 ### Table of contents
 
 A `toc` array property will be injected into your document, listing all the `h2` and `h3` with their titles and ids, so you can link to them.

docs/nuxt.config.js

@@ -44,9 +44,9 @@ export default {
     '@/plugins/categories',
     '@/plugins/i18n.client',
     '@/plugins/vue-scrollactive',
-    '@/plugins/components',
     '@/plugins/menu.client'
   ],
+  components: true,
   /*
   ** Give routes to static generation
   */
@@ -76,15 +76,6 @@ export default {
     '@nuxt/content'
   ],
   /*
-  ** Components auto import
-  ** See https://github.com/nuxt/components
-  */
-  components: {
-    dirs: [
-      { path: '@/components', pattern: '*.vue' }
-    ]
-  },
-  /*
   ** Modules configuration
   */
   colorMode: {

docs/package.json

@@ -12,10 +12,10 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
   },
   "dependencies": {
-    "@nuxt/content": "^1.3.2",
+    "@nuxt/content": "nuxt/content#dev",
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "lodash.groupby": "^4.6.0",
-    "nuxt-edge": "^2.13.0-26541346.39dd866b",
+    "nuxt": "^2.13.1",
     "nuxt-i18n": "^6.12.2",
     "prism-themes": "^1.4.0",
     "tailwindcss": "^1.4.6",

docs/pages/_slug.vue

@@ -113,6 +113,10 @@ export default {
   }
 }
 
+.nuxt-content h4 {
+  @apply text-xl font-semibold mb-2 pb-1 border-b -mt-16 pt-20;
+}
+
 @screen lg {
   .nuxt-content h2 a,
   .nuxt-content h3 a {