feat: global components

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/components/bases/Dropdown.vue → docs/components/global/bases/Dropdown.vue

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

docs/content/en/writing.md

@@ -313,6 +313,14 @@ However, you cannot render
 </my-component>
 ```
 
+#### Global components
+
+Since **v2.0.0**, you can now put your components in the `components/global` directory so you don't have to import them in your pages.
+
+In Nuxt.js `>= 2.13`, `@nuxt/components` is included by default, however if you use a previous version you have to manually install and add `@nuxt/components` to buildModules inside `nuxt.config.js`.
+
+> Take a look at [@nuxt/components documentation](https://github.com/nuxt/components#usage).
+
 ### 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

@@ -15,7 +15,7 @@
     "@nuxt/content": "^1.3.2",
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "lodash.groupby": "^4.6.0",
-    "nuxt-edge": "^2.13.0-26541346.39dd866b",
+    "nuxt": "^2.13.0",
     "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 {

example/nuxt.config.js

@@ -8,9 +8,6 @@ module.exports = {
   modules: [
     contentModule
   ],
-  plugins: [
-    '~/plugins/components'
-  ],
   content: {
     nestedProperties: [
       'categories.slug'

lib/index.js

@@ -34,6 +34,13 @@ module.exports = async function (moduleOptions) {
     options.apiPrefixWithBase = baseRouter + options.apiPrefix
   }
 
+  this.nuxt.hook('components:dirs', (dirs) => {
+    dirs.push({
+      path: '~/components/global',
+      global: true
+    })
+  })
+
   const ws = new WS({
     apiPrefix: options.apiPrefixWithBase
   })

package.json

@@ -66,13 +66,13 @@
     "codecov": "^3.7.0",
     "eslint": "^7.3.1",
     "husky": "latest",
+    "nuxt": "^2.13.0",
     "jest": "^26.1.0",
-    "nuxt-edge": "^2.13.0-26541346.39dd866b",
     "puppeteer": "^4.0.1",
     "standard-version": "^8.0.0",
     "tib": "latest"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}