Vue でのグローバルコンポーネントの登録はVue.componentをマウント前に実行することです。ただこれ、 NuxtJS ではどうすればいいのか。

プラグイン

これにはプラグインを使います。プラグインの目的は NuxtJS アプリがマウントされる前Vueを使って行いたい処理を実行することです。

これにより例えば、

• Vue.component
• Vue.directive
• Vue.mixin

などによる初期設定などができます。

グローバルコンポーネント登録

Vue.componentを使って登録処理を行うようなプラグイン（ただの.js）ファイルを作ります。このような感じで良いと思います。

import AComponent from './path/to/a-component.vue';

Vue.component('a-component', AComponent);

これをルートからplugins/global-components.jsとなるように置きました。

あとはこれを NuxtJS が読めるようにするだけです。

plugins セクション

nuxt.config.jsの設定にpluginsというセクションを追加します。これにはプラグインファイルへのパスとなる文字列の配列を置きます。またここには、 NuxtJS 固有のパスルールが適用できるので、~や~~などのエイリアスを使ってパスを指定できます。

上記で作ったプラグインを登録するには例えばこのようになります。

export default {
  /* ... */
  plugins: [
    '~/plugins/global-components.js'
  ],
  /* ... */
}

無事使えるようになっていれば完了です。

<template>
  <a-component />
</template>

nuxt@^2.8.0時に書いています。

依存のインストール

vue, vue-property-decorator, nuxt, @nuxt/config, @nuxt/typescript, @babel/polyfil, core-js@^2が必要でした。

yarn add vue vue-property-decorator nuxt @nuxt/config @nuxt/typescript @babel/polyfil core-js @types/core-js

@babel/polyfilとcore-js@^2はよく分かっていませんが、core-js@^2が解決できないという旨のエラーが大量に出たんですが、この２つを依存に含めたら治っただけなのでもしかしたら別バージョンの NuxtJS ではいらないかもしれません。

恐らくes6.*やes7.*系のファイルは現在最新のcore-js@^3では含まれていない為起きているのだと思います。

設定ファイル

nuxt.config.ts

TypeScript の場合はnuxt.config.ts、.tsです。これをプロジェクトルートに起きます。とりあえず中身は空で大丈夫です。

import NuxtConfiguration from '@nuxt/config';

const config: NuxtConfiguration = {};

export default config;

tsconfig.json

これはこんな感じで。

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "es6",
            "es7",
            "es2017"
        ],
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "module": "esnext",
        "experimentalDecorators": true
    },
    "include": [
        "nuxt.config.ts",
        "pages"
    ],
    "exclude": []
}

ページ作成

page/index.vueを作ります。

<template>
  <div>
    <h2>{{message}}</h2>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'

@Component
export default class IndexPage extends Vue {
  public message = 'Hello from NuxtJS!';
}
</script>

結果

ページがちゃんと見れたら完了です。

ERROR Failed to compile with 1 errors

ログ

Compiled with some errors in 3.81s

ERROR Failed to compile with 1 errors

These relative modules were not found:
./components/nuxt-error.vue in ./.nuxt/index.js

解決法

依存にwebpackをインストールしている（package.jsonにwebpackがある）ならそれを削除する。

yarn remove webpack