Help us understand the problem. What is going on with this article?

nuxt.jsのlayoutsがとても便利

More than 1 year has passed since last update.

これは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さんです!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした