Nuxtで作成したコンポーネントを毎回importして使用するのがめんどくさい!と思ったらこの記事で解決です。
コンポーネントは作成済みで進めていきます。
作業手順
- 作成したコンポーネントをpluginsでimportする
- nuxt.config.jsに追加する
- コンポーネントを使用する
実際にみていきます。
作成したコンポーネントを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