Vueを利用する際になくてはならないのがComponentです
※Componentの説明についてはこちらを読んでください
WebサイトやWebアプリケーションの構築をする際に
NavbarやSidebarやBodyといったレイアウトや各種のUIなど部品ごとに再利用を考えてComponentを使うことでデザインの統一感がでるだけでなく、その後の保守性も高まります
Nuxt３のComponentの活用についてはさらに利便性が高まる仕組みがあります
componentsディレクトリ
Nuxt3ではcomponentsディレクトリをプロジェクト内に新規で準備をしてそこに.vueのファイルを作成することで、Componentをより便利に活用することができるようになります
難しくはありません
作成中のプロジェクトにcomponentsというディレクトリを準備するだけです
自動インポート
componentsディレクトリ内にあるcomponentは自動インポートとなります
そのため、componentを作成してしまえば、あとは意識せず、
templateタグの中で<コンポーネント名/>で実装できます
共通するパーツをcomponentでつくろう
そもそもの話しをするとcomponentとは何のために作成するのか？
なるべく楽をしたいからですね
例えば、
Navbar.vueのように、常に表示しておきたい内容をcomponentで作成してしまえば
同じコードを書く必要がなくなります
こんな感じでnavbarを作ってしまえば、必要なページに共通して＜Navbar /＞をおいておけばよいということになります
ただ、これだけだとすべてのページにNavbarをおかなければならなくなります
そこで、利用するといいのがlayoutsディレクトリになります
layoutsディレクトリについて
layoutsディレクトリにいくつかのlayoutとなるvueファイルを置いておけば共通するレイアウトについて同じ内容を何度も書く必要がなくなり便利です
例えば上のdefault.vueファイルをlayoutsディレクトリを作成しておいておけば、すべてのpagesディレクトリ内にあるリンクについて、共通するレイアウトとして使用することができます
pagesディレクトリ内にある内容は＜slot /＞の位置に表示されることになります
SPAを作成する際に非常に便利です
もちろん、すべてのページを同じレイアウトにしない場合もあると思います
その場合は、layoutsディレクトリ内に、任意の名称でvueファイルを作成しておきます
そのうえで、使用したいページで明示しておけばそのページだけ違うレイアウトを使用することが可能です
異なるレイアウトを使用する場合
異なるレイアウトを使用する場合は、
使用するページのvueファイルの中で、このレイアウトを使うよというscriptを書いておけばOKです
上記のようにdefinePageMeta()内で使用するレイアウトをプロパティで指定するだけです
とても簡単にページごとのカスタマイズができます
※defaultの場合は指定しなくてもOK
Nuxtではこのようにディレクトリに必要な構成を準備していくことで、自然と作りたいものが作れるようになっています
とても便利ですし、ドキュメントもとても丁寧に説明が書かれていますので、少し触ってみることをおすすめします
componentsディレクトリについてYoutube
layoutsディレクトリについてYoutube
コメント