【Nuxt.js】Nuxt実践編：layout

前置き

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

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

Let's try!

構成を考える

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

ticktack…

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

⬇️

ディレクトリ

layoutsでメニューの切り替え

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

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

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

コード

<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>

<MenuDefault

v-show="isMenu"

class="menu"

@clickMenu="clickMenu()"

<HeaderDefault

:isMenu="isMenu"

class="header"

@clickMenu="clickMenu()"

</div>

</template>

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をリセットしておきます。

コード

) assets

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

$sp: 425px;
$tab: 768px;
$lap: 1024px;
$pc: 1200px;

@mixin sp {
  @media screen and (max-width: ($sp)) {
    @content;
  }
}

@mixin tab {
  @media screen and (max-width: ($tab)) {
    @content;
  }
}

@mixin lap {
  @media screen and (max-width: ($lap)) {
    @content;
  }
}

@mixin pc {
  @media screen and (max-width: ($pc)) {
    @content;
  }
}

$sp: 425px;

$tab: 768px;

$lap: 1024px;

$pc: 1200px;

@mixin sp {

@media screen and (max-width: ($sp)) {

@content;

}

@mixin tab {

@media screen and (max-width: ($tab)) {

@content;

}

@mixin lap {

@media screen and (max-width: ($lap)) {

@content;

}

@mixin pc {

@media screen and (max-width: ($pc)) {

@content;

}

) assets

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

) file

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

export default {
  css: [
    '~/assets/scss/reset.scss',
  ],
  styleResources: {
    scss: [
      '~/assets/scss/_variables.scss',
    ]
  },
}

export default {

css: [

'~/assets/scss/reset.scss',

styleResources: {

scss: [

'~/assets/scss/_variables.scss',

]

}

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

<template>
  <div class="header header-default">
    <div class="container">
      <nuxt-link to="/">
        <h1>aLiz Nuxt</h1>
      </nuxt-link>
      <nav class="nav">
        <ul class="links">
          <nuxt-link
            to="/category"
            tag="li"
            class="link"
          >
            <p class="label">
              category
            </p>
          </nuxt-link>
          <nuxt-link
            to="/loadmap"
            tag="li"
            class="link"
          >
            <p class="label">
              loadmap
            </p>
          </nuxt-link>
          <nuxt-link
            to="/about"
            tag="li"
            class="link"
          >
            <p class="label">
              about
            </p>
          </nuxt-link>
        </ul>
        <button
          :isMenu="isMenu"
          class="menu"
          @click="$emit('clickMenu')"
        >
          <svg v-if="!isMenu" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/></svg>
          <svg v-if="isMenu" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>
        </button>
      </nav>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isMenu: Boolean,
  },
}
</script>

<style lang="scss" scoped>
  .header-default {
    width: 100%;

    > .container {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      > .nav {
        display: flex;

        > .links {
          display: flex;

          @include tab {
            display: none;
          }

          > .link {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        > .menu {
          display: none;

          @include tab {
            display: block;
          }
        }
      }
    }
  }
</style>

<nuxt-link to="/">

</nuxt-link>

<nuxt-link

to="/category"

tag="li"

class="link"

MenuDefault.vueの作成

Point!

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

コード

) components

<template>
  <nav class="menu menu-default">
    <ul
      class="links"
      @click="$emit('clickMenu')"
    >
      <nuxt-link
        to="/category"
        tag="li"
        class="link"
      >
        <p class="label">
          category
        </p>
      </nuxt-link>
      <nuxt-link
        to="/loadmap"
        tag="li"
        class="link"
      >
        <p class="label">
          loadmap
        </p>
      </nuxt-link>
      <nuxt-link
        to="/about"
        tag="li"
        class="link"
      >
        <p class="label">
          about
        </p>
      </nuxt-link>
    </ul>
  </nav>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .menu-default {
    background-color: white;
    padding: 100px;

    > .links {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      > .link {
        cursor: pointer;
      }
    }
  }
</style>

<ul

class="links"

@click="$emit('clickMenu')"

<nuxt-link

to="/category"

tag="li"

class="link"

layouts/default.vueの作成

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

コード

) file

<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>

<style lang="scss" scoped>
  .layout-default {
    background-color: #AAE3D6;
    position: relative;
    margin: 0;

    > .menu {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    > .header {
      position: fixed;
      left: 0;
      z-index: 7000;

      @include sp {
        top: 12px;
      }
    }

    > .content {
      padding: 72px 10px 0;
      min-height: 100vh;
    }
  }
</style>

<MenuDefault

v-show="isMenu"

class="menu"

@clickMenu="clickMenu()"

<HeaderDefault

:isMenu="isMenu"

class="header"

@clickMenu="clickMenu()"

</div>

</template>

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>

.layout-default {

background-color: #AAE3D6;

position: relative;

margin: 0;

> .menu {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

> .header {

position: fixed;

left: 0;

z-index: 7000;

@include sp {

top: 12px;

}

> .content {

padding: 72px 10px 0;

min-height: 100vh;

}

</style>

まとめ

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

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