2019-04-05に更新

Nuxt.jsにて特定のコンポーネントを全てのページで使えるようにする

Nuxt.jsでページ内で使いたいコンポーネントがある時componentsオプションを設定すれば可能だが、全てのページで使うのでいちいち設定しなくても共通で使えるようにする方法。

例えばみんな大好きCommonComponentを全てのページで使えるようにしたい場合、下記のようなプラグインを作れば良い。

plugins/common.js

import Vue from 'vue'
import CommonComponent from '../components/CommonComponent.vue'

Vue.component('common', CommonComponent)

あとはこのプラグインをnuxt.config.jsで指定する。

  plugins: [
    '~plugins/common.js'
  ],

これで各ページでいちいちcomponents内にCommonComponentを含めなくても<common></common>を直接全てのページ内に配置することができるようになる。


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント