Nuxt.jsをVue.jsに解体するTips(Layout編)

背景

• Nuxt.jsで動いているSPAアプリをVue.jsに解体してほしい的な話があり、部分部分をTipsとして投稿します。
• APIはLaravel(6.x)です。なおLaravelとNuxt.jsは同一リポジトリです(なぜ)
• Nuxt.jsは2.9。Vueは2.6.10
• 今回はLayout編です。

Layoutを分けたい

nuxt/pages/~~.vue

<script>
export default {
  layout: 'noauth',

• 認証に見れるとLayoutと非認証時に見れるLayoutを分けた時があります。そういった時Nuxt.jsは上記のように簡単にできますが、Vue.jsだとコツが必要です。

Layoutをそれぞれ作成する

認証用のLayout

resources/js/layouts/default.vue

<template>
  <div>default
    <router-view />
  </div>
</template>

非認証時に見れるレイアウト

resources/js/layouts/noauth.vue

<template>
  <div>noauth
    <router-view />
  </div>
</template>

resources/js/router.jsの編集

Routerでmeta layoutを定義する

resources/js/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '~/pages/index'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Index',
      meta: { layout: 'default' },
      component: Index,
    },
    {
      path: '/noauth',
      name: 'NoAuth',
      meta: { layout: 'noauth' },
      component: Index,
    },
  ],
});

resources/js/App.vueの編集

メタフィールドをみてLayoutを変更

resources/js/App.vue

<template>
  <div id="app">
    <component v-bind:is="layout" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultLayout: "default"
    };
  },
  computed: {
    layout() {
      return (this.$route.meta.layout || this.defaultLayout) + "-layout";
    }
  }
};
</script>

Layout用のコンポーネントを定義

resources/js/app.js

import Vue from "vue";
import router from '~/router'
import App from '~/App.vue'

import DefaultLayout from '~/layouts/default'
import NoAuthLayout from '~/layouts/noauth'

Vue.component('default-layout', DefaultLayout)
Vue.component('noauth-layout', NoAuthLayout)

new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')

参考

• Vueでレイアウトを変更する

関連リンク

• Nuxt.jsをVue.jsに解体するTips(JavaScriptコンパイル編)