【Nuxt.js】Nuxt実践編：layout

5390 ワード
Vue.js コンポーネント JavaScript nuxt.js JavaScript テキストリンク

🎈 この記事はWP専用です
https://wp.me/pc9NHC-AQ

前置き

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

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

Let's try!

構成を考える

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

ticktack…

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

⬇️

ディレクトリ

file
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を使用しますね💡

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

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

layouts/default.vue
<template>
 <div class="layout layout-default">
   <MenuDefault
     v-show="isMenu"
     class="menu"
     @clickMenu="clickMenu()"
   />
   <HeaderDefault
     :isMenu="isMenu"
     class="header"
     @clickMenu="clickMenu()"
   />
   <div class="content">
     <nuxt />
   </div>
 </div>
</template>

<script>
import Header from '~/components/templates/headers/Header.vue'
import MenuDefault from '~/components/templates/menus/MenuDefault.vue'

export default {
 components: {
   HeaderDefault,
   MenuDefault,
 },
 data () {
   return {
     isMenu: false,
   }
 },
 methods: {
   clickMenu () {
     this.isMenu = !this.isMenu
   },
 },
}
</script>

assetsの下準備

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

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-AQ