VueやNuxtで自作コンポーネントをグローバルに呼び出す

Vueのコンポーネント便利ですよね！
これをいかにうまく作るかがVueの醍醐味だと思っております。
作ったコンポーネントを1度しか呼び出さないときは

<script>
 import MyButton from '~/components/buttons/MyButton'

 export default {
   components: {
     MyButton
   }
 }
</script>

で呼び出すようにすれば充分でしょう。
でも、至る箇所でコンポーネントを呼び出したい場合、いろいろな.vueファイルに記述を書くのは面倒です。
そういったのはグローバルで呼び出せるようにしてしまいましょう。

グローバルに登録

例えばMyButtonというコンポーネントを作ったとします。
以下のような記述を書くとグローバルに登録でき、.vueファイル内でMyButtonを呼び出すことが出来ます。

import Vue from 'vue'

import MyButton from '~/components/buttons/MyButton'
Vue.component('MyButton', MyButton)

ではこの記述をどこに書くのか・・・
僕はコンポーネントを種類別にディレクトリを分けます。
例えばボタンならcomponents/buttonsの中に
チェックボックスやラジオボタンならcomponents/formsの中にといった具合です。
でこれらをグローバルに呼び出したいので、components/buttonsの中にindex.js、components/formsの中にindex.jsを作りその中に上記のようなグローバルに登録する記述を書きます。
そしてcomponents/index.jsを用意してそこに以下のように記述します。

components/index.js

import '~/components/buttons'
import '~/components/forms'

最後にこのcomponents/index.jsをどこかで呼び出せばOKです。
vue.jsの場合は、main.js内に

import '~/components'

を追記しましょう。

nuxt.jsの場合はnuxt.config.jsの中のpluginsに登録しておけば、フレームワーク起動時に呼ばれるのでどのvueファイルでもコンポーネントを呼び出すことが出来ます。

export default {
  plugins: [
    '~/components/index.js'
  ]
}