eureka

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

0

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

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

作業手順

  1. 作成したコンポーネントをpluginsでimportする
  2. nuxt.config.jsに追加する
  3. コンポーネントを使用する

実際にみていきます。

作成したコンポーネントをpluginsでimportする

パンくずリストのコンポーネント(~/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に追加する

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

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

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

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

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

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

<script>
export default {}
</script>

0