nuxt.js + Vuetify：Webアプリ用のテンプレート作成

Webページを作成する際のテンプレート的なものが欲しかったので、作ってみました。
とはいうものの、nuxt.js + Vuetifyをインストールした際に生成される初期ページに含まれるヘッダーやフッターを分割しただけです。

分割するにあたって、Vuexによる状態管理が必要となったため、合わせて導入してます。

GitHubからプロジェクトごと持ってくるなり、ソースコードを抜いてくるなり、良い感じで使いまわしたいなと思ってます。

GitHub
https://github.com/gonkunkun/nuxtjs_sample

動作環境

• nuxt.js：2.5.1

　ディレクトリ構成（変更部分のみ）

/
　├ components/
　│　└ layouts/
　│　　　└ footer.vue
　│　　　└ header.vue
　│　　　└ rightDrawer.vue
　│　　　└ sidebar.vue
　├ layouts/
　│　└ default.vue（一番大きい単位の画面ファイル）
　├ store/
　│　└ default.js (Vuex用)

一部ソースコード

default.vue

<template>
  <v-app dark>
    <default-sidebar />
    <default-header />
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
    <default-right-drawer />
    <default-footer />
  </v-app>
</template>

<script>
import DefaultHeader from "~/components/layouts/header";
import DefaultFooter from "~/components/layouts/footer";
import DefaultSidebar from "~/components/layouts/sidebar";
import DefaultRightDrawer from "~/components/layouts/rightDrawer";
export default {
  name: 'default',
  components: {
    DefaultHeader,
    DefaultFooter,
    DefaultSidebar,
    DefaultRightDrawer
  },
  data() {
    return {
    }
  }
}
</script>

• Vuex用ファイル

/store/default.js

export const state = () => ({
    title: 'Home page sample',
    clipped: false,
    drawer: false,
    fixed: false,
    miniVariant: false,
    right: true,
    rightDrawer: false
})

// 同期処理
export const mutations = {
    tglClipped(state) {
      state.clipped = !state.clipped
    },
    tglDrawer(state) {
      state.drawer = !state.drawer
    },
    tglFixed(state) {
      console.log(state.fixed);
      state.fixed = !state.fixed
      console.log(state.fixed);
    },
    tglMiniVariant(state) {
      state.miniVariant = !state.miniVariant
    },
    tglRight(state) {
      state.right = !state.right
    },
    tglRightDrawer(state) {
      state.rightDrawer = !state.rightDrawer
    }
}

// 非同期処理
export const actions = {
}

header.vue

<template>
    <v-toolbar :clipped-left="clipped" fixed app>
      <v-toolbar-side-icon @click="$store.commit('default/tglDrawer')" />
      <v-btn icon @click.stop="$store.commit('default/tglMiniVariant')">
        <v-icon>{{ `chevron_${$store.state.default.miniVariant ? 'right' : 'left'}` }}</v-icon>
      </v-btn>
      <v-btn icon @click.stop="$store.commit('default/tglClipped')">
        <v-icon>web</v-icon>
      </v-btn>
      <v-btn icon @click.stop="$store.commit('default/tglFixed')">
        <v-icon>remove</v-icon>
      </v-btn>
      <v-toolbar-title v-text="$store.state.default.title" />
      <v-spacer />
      <v-btn icon @click.stop="$store.commit('default/tglRightDrawer')">
        <v-icon>menu</v-icon>
      </v-btn>
    </v-toolbar>
</template>

<script>
export default {
  data() {
    return {
    }
  }
}
</script>

footer.vue

<template>
    <v-footer :fixed="$store.state.default.fixed" app>
      <span>&copy; 2019</span>
    </v-footer>
</template>

<script>
export default {
  data() {
    return {
    }
  }
}
</script>

sidevar.vue

<template>
    <v-navigation-drawer
      v-model="$store.state.default.drawer"
      :mini-variant="$store.state.default.miniVariant"
      :clipped="$store.state.default.clipped"
      fixed
      app
    >
      <v-list>
        <v-list-tile
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title v-text="item.title" />
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          icon: 'apps',
          title: 'Welcome',
          to: '/'
        },
        {
          icon: 'bubble_chart',
          title: 'Inspire',
          to: '/inspire'
        }
      ],
    }
  }
}
</script>

rightDrawer.vue

<template>
    <v-navigation-drawer v-model="$store.state.default.rightDrawer" :right="$store.state.default.right" temporary fixed>
      <v-list>
        <v-list-tile @click.native="$store.commit('default/tglRight')">
          <v-list-tile-action>
            <v-icon light>compare_arrows</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
</template>

<script>
export default {
  data() {
    return {
    }
  }
}
</script>