Vueと共通

【Nuxt.js】Nuxt文法編:component①

前置き

componentとは
使いまわしができる、
再利用ができるものです🌟

シンプルなボタンでも
CSSが長くなったりして
まいかい書くのは面倒ですよね…😔
それを解決してくれるのが
componentです🌟

作り方、表示のさせ方を解説していきます✍️


componentの種類と使用箇所

種類

まずは種類を把握しましょう。
おおまかに全部で3つあります💡
今回は1の自作のコンポーネント
について解説していきます🍎
前置きに書いたボタンのような場合は
自作のコンポーネントに該当します🙋‍♀️

  1. <好きに命名した名前 />
    =自作のコンポーネント
    importが必要!
  2. <nuxt />
    layouts内でのみ使用
  3. <nuxt-child />
    ネストされたルート内で使用

nuxtnuxt-childについては
別記事でご紹介します🌟

公式: コンポーネントの基本
https://jp.vuejs.org/v2/guide/components.html

コンポーネントで使えるイベントや
v-bind, v-model, slotなどは
それぞれ別の記事に分けております✍️
イベント: https://wp.me/pc9NHC-ht
v-bind: https://wp.me/pc9NHC-nh
v-model: https://wp.me/pc9NHC-kO
slot: https://wp.me/pc9NHC-k3


使用箇所

componentsが使える場所
(インポートできる場所)は
ページを構成する部分です!

  • layout
  • 他のコンポーネント
  • pageコンポーネント

自作のコンポーネントの場合は
この中のどれでも使用可能です🤗


基本コード

基本コードがこちら。
あとは使いまわしたい物に
作り替えていきましょう👍✨

) components


Step1: 使い回すコンポーネントを作る

では早速つくってみましょう❣️

ボタンのデザインとかいちいち面倒なので
コンポーネントにしちゃって
中身のテキストはslotで親で決める…
なんてことができます💡

スタイリングとか細かいことは置いといて
とりあえず⬇️のコードを
コピペして作ってみましょう💃
作成箇所はこちらです。

directory

components/
--| ButtonDefault.vue


slotを使う場合

今回は使いませんが
slotでテキストを変えた場合はこんな感じ❗️

やってみたい方は
こちらをチャレンジしてみてください🔥💪
https://wp.me/pc9NHC-65


コード

) components


Step2: コンポーネントをインポートする

作ったコンポーネントを
pageコンポーネントに表示させます🌟
表示させるためには
作成したコンポーネントを
importする必要があります❗️

directory

components/
--| ButtonDefault.vue

pages/
--| index.vue


解説

import ButtonDefault from '~/components/ButtonDefault.vue'
インポートしたいコンポーネントの
場所(path)と名前を書きます。

export default { components: {コンポーネント名 }}
インポートしたコンポーネントの
使用登録をします。

<ButtonDefault />
登録したコンポーネントを
template内の使いたい場所に書きます。
閉じタグも一緒にした方で
<ButtonDefault></ButtonDefault>
意味は全く同じです。


コード

) pages

いちいちファイルの場所書くの!?😵
面倒くさい〜😖💦

と思った方もいるでしょう笑

実は❣️

自動でインポートできるので
書く必要はありません😉❤️

と言っても
ちゃんとやり方があるので
見ていきましょう👀


自動でインポートする

コード

不思議〜❣️🤭
なんとこれだけで表示できちゃいます✨

) pages


やり方

公式はこちら
https://ja.nuxtjs.org/guides/directory-structure/components/#components-discovery

Nuxtのアップグレードが済んでいればOK!
まだの方はこちらの手順を見ながら
アップグレードをしてください🍒
https://ja.nuxtjs.org/guide/upgrading/

ターミナルでバージョンを確認しましょう👀

terminal

$ npx nuxt -v

@nuxt/cli v2.14.3

実行してエラーがなければOK⭕️

terminal

$ npm run dev


フォルダ別に同じコンポーネント名がある場合

そもそもファイル名を個別につけていれば
必要ないのですがご紹介しておきます💡🙋‍♀️

例えばサイズ別のボタンを作ったとします。
これだと<Button />だけでは
どのサイズのボタンか指定ができません🤔💭

directory

components/
--| small
---- | Button.vue
--| medium
----| Button.vue
--| large
----| Button.vue

pages/
--| index.vue

コード

そこでnuxt.config.jsに
予め場所と名前(prefix)を
記載しておきます✍️
読み込む時には<Button />の先頭に
追記したprefixをつければOK🙆‍♀️⭕️

公式はこちら
https://ja.nuxtjs.org/guides/directory-structure/components/#nested-directories

) file

ポイント

階層が深くなっても問題ないです!
path: ''~/components/atom/buttons/,
prefix: 'atombutton'

インポートする際は
<AtombuttonTitle />です。
<AtomButtonTitle />では
表示されないのでご注意を!

) pages

これで全てのサイズの
ボタンが表示されます!


遅延読み込み

遅延読み込み

最初から全て読み込むのではなく
必要ないものは読み込まない=遅延

必要とされた時だけ読み込んで
表示の高速化が可能です🏃‍♀️💨

v-if, v-elseやモーダルなど
すぐに必要とされる要素ではない場合
lazy プレフィックスを使って
遅延読み込みができます💡

コード

) pages


まとめ

  • 自作コンポーネントは使い回しが効き、 ページを構成するほとんどの部分で使用可能
  • 作成したコンポーネントは使いたい場所にインポートをすることで使用できる
  • インポートは自動で行うこともできる

-Vueと共通

© 2020 aLiz Nuxt