NuxtJS 1 / 1

グローバルなコンポーネント

関連

グローバルなコンポーネントとは、各ファイルで読み込んでcomponentsセクションに渡さなくとも使えるコンポーネントのことです。

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

Vue.componentという静的メソッドを使います。これは引数を２つ取り、それぞれ

テンプレート上のコンポーネントの名前string
dataやmountedなどを含む、いわゆる Vue コンポーネントのオブジェクト

を受け取ります。
ちなみに、コンポーネントの名前は-で繋いだ名前にすると良いです。

以下はmy-componentというコンポーネントの登録例です。

Vue.component('my-component', {
  data() {
    return {
      message: 'hello'
    }
  },
  mounted() {
    console.log(this.message);
  }
});

アプリをマウントする前に

new Vueでアプリをマウントする前に上記のコードで登録しておく必要があります。

Vue.component('...', {/* ... */});

new Vue({/* ... */});

TypeScript と共に

関連

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