• ..

Jest

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

    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>

    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/polyfilcore-js@^2はよく分かっていませんが、core-js@^2が解決できないという旨のエラーが大量に出たんですが、この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.jsonwebpackがある)ならそれを削除する。

    yarn remove webpack