グローバルコンポーネントを作成する

Nuxtで作成したコンポーネントを毎回importして使用するのがめんどくさい！と思ったらこの記事で解決です。

コンポーネントは作成済みで進めていきます。

Contents

作業手順

実際にみていきます。

パンくずリストのコンポーネント(~/components/Breadcrumb.vue)をグローバルコンポーネントとして追加します。

pluginsディレクトリ配下にimport-ui.jsというファイルを作成して下記のように追加しました。

import Vue from 'vue'

import Breadcrumb from '~/components/Breadcrumb.vue'

Vue.mixin({
  components: {
    Breadcrumb
  }
})

複数ある場合はimportしてからmixin内のBreadcrumbの下に追加していきます。その際カンマを忘れると怒られます。

nuxt.config.jsで作成したプラグインを読み込ませます。

下記のpluginsの行を見つけて下記のように追加します。

  plugins: [
    '~plugins/import-ui'
  ],

nuxt.config.jsを編集したのでサーバを再起動します。

これで他のファイルでimportしなくても使用できるようになりました！

<template>
  <div>
    <Breadcrumb />
    <nuxt />
  </div>
</template>

<script>
export default {}
</script>