アプリ サイト

【Nuxt.js】Nuxt実践編:layout

前置き

layoutの実践編です🤗💕
基礎は文法編でご確認ください👀
https://wp.me/pc9NHC-A4

タブレット以下のサイズになったら
ハンバーガーメニューを表示させましょう🌟

Let's try!


構成を考える

まずは全体の構成をイメージしましょう🤔💭
Headerlayouts/default.vueで固定
タブレット以下でメニューの切り替えをするから…

ticktack…

大体のイメージはできましたか?💡
それではまずディレクトリ から
まとめてみましょう!

⬇️


ディレクトリ

directory

assets/
--| scss/
----| _variables.scss
----| reset.scss

components/
--| templates/
----| headers/
-----| HeaderDefault.vue
----| menus/
-----| MenuDefault.vue

layouts/
--| default.vue

pages/
--| index.vue

nuxt.config.js

componentsは
アトミックデザイン に基づいて分けています🌟

使用するファイルはたくさんありますが、
今回のメインはメニューの切り替えを
layouts/default.vueでやることです🔄🌠

💥そのためスタイリングは丁寧ではありません💥
あくまでlayoutsでの切り替えのためだけに
超サラッと書いております…!


layoutsでメニューの切り替え

HeaderDefault.vueのハンバーガーメニューを開くと
専用メニューのコンポーネントが表示される…
クリックイベントを検知する必要があるので
HeaderDefault.vueでは$emitを使用しますね💡

そしてそのイベントで真偽値を切り替え
メニューの表示/非表示を行います。

このイメージができれば、ほぼ完成です☺️笑

コード


assetsの下準備

まずはscssで下準備🌟
メディアクエリ の作成と
余計なcssをリセットしておきます。

コード

) assets

Sassとmixinを使った
メディアクエリについてはこちら
https://wp.me/pc9NHC-sl

) assets

リセットcssはこちらを使用しました!
https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css

) file

scssの読み込みをしておきます。
通常のスタイリングはcssに、
変数はstyleResourcesに記載する必要があります✍️


HeaderDefaultの作成

Point!

$emit
子自身のクリックイベントを親に検知してもらう
解説記事はこちら:https://wp.me/pc9NHC-od

v-if="isMenu", v-if="isMenu"
親のハンバーガーメニューを開く真偽値によって
表示アイコンを切り替える
解説記事はこちら:https://wp.me/pc9NHC-e

アイコンはこちらを使用しました!
iconmonstr
https://iconmonstr.com/menu-1-svg/

コード

) components


MenuDefault.vueの作成

Point!

$emit
遷移した際にメニューを閉じるため
子自身のクリックイベントを検知してもらう

コード

) components


layouts/default.vueの作成

#構成を考えるで既にほとんど完成しているので
スタイリングのみ追加しています。

コード

) file


まとめ

いかがでしたか?💡
layoutsのより具体的な使い方を学べたかなと思います📚
また、最初の構成をしっかり考えることで
スムーズな実装のしやすさも体験できたかと思います🌟

こんな記事が欲しい!
この記事のこんなところが良かった!
などなど、ご意見お待ちしております🤗

-アプリ, サイト
-,

© 2020 aLiz Nuxt