nuxt.jsのlayoutsがとても便利

これはVue.js #3 Advent Calendar 2017 – Qiita 7日目の記事です。

今回、業務システムをNuxt.jsで実装しました。
使っていて、layoutが以外と便利だなと感じたのであーだこー書ければなと

Nuxt.js
Nuxt.jsの便利なところはめんどくさい設定をしといてくれています。

• vue-router
• vuex
• middleware
• サーバーサイドレンダリングなど

今回業務システムなのでサーバーサイドレンダリングをする必要はなかったのでspamodeで開発していました。

nuxt.conf.js

module.exports = {
  mode: 'spa',

ページの作成

公式のとおり、ページの作成は/pages直下にファイルを作成するだけでページが生成されます

-pages
  -home.vue

/home

基本レイアウト

layoutがとても便利
共通のヘッダーやサイドバーをどう構成しようか毎回悩むのですが、
Nuxt.jsは /layouts でレイアウト用のファイルが作成でき、ページ毎に設定できる

home.vue

export default {
  layout: 'default',

layouts/default.vue

<template>
  <div class="wrapper">
    <sidebar-components class="is-desktop" :sidebarItem="sidebarItem" :isCollapse="isCollapse"></sidebar-components>
    <transition name="transition-fade">
      <div class="mobile-back" @click="showBack" v-show="backSlide"></div>
    </transition>
    <transition name="transition-slide">
      <sidebar-components class="is-mobile" :sidebarItem="sidebarItem" v-show="showSidebar"></sidebar-components>
    </transition>
    <section class="container">
      <common-header @clickSidebar="clickSidebar" @clickNav="clickNav" :isCollapse="isCollapse"></common-header>
      <div class="page-contents">
        <div class="page">
          <nuxt></nuxt>
        </div>
      </div>
    </section> 
  </div>
</template>

<nuxt></nuxt> にlayoutを設定したpagesが表示されます
今回はヘッダーとサイドバーもコンポーネントにわけ、レイアウトを構成していました。

ページ毎にレイアウトを変更

ヘッダーはそのままでサイドバーの項目だけページ毎に変えたいときも1つのレイアウトcomponentでまかなえました

home.vue

export default {
  fetch ({ store }) {
    return store.commit('toggleLayout', 'sidebar1')
  },
  layout: 'default',

store/mutaition.js

export default {
  toggleLayout (state, value) {
    state.layout = value
  },

fetchのタイミングでStoreで、どのサイドバーを表示するかを切り替えます

layouts/default.vue

  computed: {
    ...mapState([
      'layout',
      'loginUser'
    ]),
    sidebarItem () {
      if (this.layout === 'sidebar1') {
        return [{ id: 1, name: 'メニュー1' }, { id: 2, name: 'メニュー2' }]
      } else if (this.layout === 'sidebar2') {
        return [{ id: 3, name: 'メニュー3' }, { id: 4, name: 'メニュー4' }]
      }
    }
  },

サイドバーコンポーネントもpropsで渡すデータを変更するだけで項目が変更できるように作れば、
1つのSidebarComponents.vueでまかなえちゃいます！

Middleware

middlewearは公式ではnuxt.conf.jsか各ページコンポーネントで設定すると書かれていましたが、レイアウトでも設定することができたので、今回レイアウトで設定しました

• 全体に設定するのは違う(loginページではmiddlewearいらない)
• 各コンポーネントに設定するのもなんか違う
• default.vueはログイン後のレイアウトになるのココに設定しちゃおう
  みたいな感じで笑

layouts/default.vue

export default {
  middleware: ['fetch-user', 'check-auth'],

2つ設定することもでき非常に便利でした

---

Nuxt.jsを使いはじめて半年以上経ちますが、初心者にとってはめんどくさい設定がなく、使いやすかったです。(テストの設定はかなりハマりました)

他にも良い使い方や便利なこともたくさんあると思います
初めてつかった頃にlayoutがあるのがすごくやりやすい！と感じたので今回、簡単ですがこの内容で書かせて頂きました！

明日は、、、
kuwanaさんです！