110
108

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Nuxt.js】グローバルなコンポーネントの設定

Last updated at Posted at 2020-03-12

Nuxtでコンポーネントをグローバルに使いたい。
意外と記事が出てこない。
ファイルの指定の仕方忘れてる。

というわけで、備忘録的な感じで書きます。

#環境
@nuxt/cli v2.11.0

#事前準備

↓こいつをグローバルに使いたい...

components/Btn.vue
<!-- 子コンポーネント -->
<template>
  <button>クリック</button>
</template>

<script>
export default {};
</script>

 

↓このままでは、importしてないので使えません。

pages/index.vue
<!-- 親コンポーネント -->
<template>
  <div class="MainPage">
    <子コンポーネント />
  </div>
</template>

<script>
export default {}
</script>

#やり方
簡単です。
pagesフォルダとかと同じ階層にある
pluginsフォルダにcomponents.jsファイルを作ります(ファイル名は任意)

そこで下記のように書きます。

plugins/components.js
import Vue from 'vue'

//componentsファイルにあるグローバルにしたいコンポーネントをimport
import Button from '~/components/Btn'
//それを今回は'Button'というコンポーネント名で設定。
Vue.component('Button', Button)

そしてこの.jsファイルをnuxt.config.jsのpluginsに設定してあげます。

nuxt.config.js
  plugins: [
    '~/plugins/components.js'
  ],

終わり!

あとは好きな時に使うだけです。

pages/index.vue
<template>
  <div class="MainPage">
    <Button /> <!-- さっき設定したコンポーネントが使える -->
  </div>
</template>

<script>
export default {
}
</script>

スクリーンショット 2020-03-13 2.33.05.png

ちゃんとコンポーネントがグローバルに呼び出されています。

※デフォルトで全てに呼び出す設定なので、すべてのページに読み込まれます。
普通コンポーネントは部品として使うため、importすべきとのこと。
by凄腕エンジニア

##こんな便利なものもあるみたいです。
【Nuxt.js: コンポーネントのファイル名にsuffixを付けるだけで、コンポーネントをどこからでも呼び出せるようにする】
https://qiita.com/bagooon/items/2d1485f418e6523a7b4d

110
108
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
110
108

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?