Nuxt.jsでポートフォリオサイトを作ろう #2: 固定ヘッダーとフッターの作成

前回の続きです。

####テーマの変更

今のままだと画面が暗いので、nuxt.config.jsを編集して明るくします。

nuxt.config.js

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false, // 変更
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }, // 以下追記
        light: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

サーバが起動している状態なら、nuxt.config.jsを保存するとブラウザが自動的に更新され、明るい画面に変わります。

これで見やすくなりました。

####ページ内遷移ライブラリのインストール

ターミナルで以下のコマンドを実行します。

$ npm install --save vue-scrollto

vue-scrolltoをインストール後、pluginsディレクトリにvue-scrollto.jsを作成します。

plugins/vue-scrollto.js

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
  duration: 700,
  easing: [0, 0, 0.1, 1],
  offset: -100
})

次にプラグインを登録します。

nuxt.config.js

plugins: [
  '~/plugins/vue-scrollto' // 追記
],

####固定ヘッダーとフッターの作成

layoutsディレクトリ内のdefault.vueを編集します。

layouts/default.vue

<template>
    <v-app v-cloak>
      <v-app-bar
      app
      color="#41b883"
      style="color: white"
      >
        <v-app-bar-nav-icon　color="white" @click="drawer = true" />
        <v-toolbar-title>
          SAMPLE
        </v-toolbar-title>
        <v-spacer />
      </v-app-bar>

      <v-navigation-drawer
         v-model="drawer"
         fixed
         temporary
       >
         <v-list
           nav
           dense
         >
           <v-list-item-group
             v-model="group"
             active-class="indigo--text text--accent-4"
           >
            <nuxt-link v-scroll-to="'#profile'" to>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-account</v-icon>
               </v-list-item-icon>
               <v-list-item-title>
                   profile
               </v-list-item-title>
             </v-list-item>
            </nuxt-link>
            <nuxt-link v-scroll-to="'#work'" to>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-folder</v-icon>
               </v-list-item-icon>
               <v-list-item-title>
                   work
               </v-list-item-title>
             </v-list-item>
            </nuxt-link>
            <nuxt-link v-scroll-to="'#contact'" to>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-email</v-icon>
               </v-list-item-icon>
               <v-list-item-title>
                   contact
               </v-list-item-title>
             </v-list-item>
             </nuxt-link>
           </v-list-item-group>
         </v-list>
       </v-navigation-drawer>

      <v-content
      fluid>
          <nuxt />
      </v-content>

      <v-footer
      app
      color="#41b883"
      >
      <v-spacer />
      <span style="color: white">&copy; 2020 Sample. All Rights Reserved.</span>
      </v-footer>
    </v-app>
</template>

<script>
export default {
  data () {
    return {
          drawer: false,
          group: null,
    }
  }
}
</script>
<style>
[v-cloak] {
  display: none;
}

.v-application a {
    color: black;
    text-decoration: none;
}

.theme--light.v-btn:hover::before {
    opacity: 0.2;
}
</style>

default.vueを保存してブラウザを確認してみましょう。

これで固定ヘッダーとフッターができました。

次回はトップ画面を作成します。

Nuxt.jsでポートフォリオサイトを作ろう #3: トップ画面の作成