Nuxt.js で Vuetify.js を使う

7815 ワード
Vue.js nuxt.js vuetifyjs Vue.js テキストリンク

Nuxt.js 用の Vuetify.js プラグイン @nuxtjs/vuetify が用意されているのでそれを使う。

インストールと設定

@nuxtjs/vuetify をインストール

$ yarn add @nuxtjs/vuetify

続いて nuxt.config.js を編集

// file: nuxt.config.js
module.exports = {
  modules: [
    // この行を追加して有効化
    '@nuxtjs/vuetify'
  ],

  vuetify: {
    // Vuetify の設定はここに書く
    theme: {
      primary: '#3f51b5',
      secondary: '#b0bec5',
      accent: '#8c9eff',
      error: '#b71c1c'
    }
  }
}

使ってみる

とりあえず layouts/default.vue にサンプルのコードをそのまま入れて確認。


// file: layouts/default.vue
<template>
  <v-app id="inspire">
    <v-navigation-drawer
      fixed
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>home</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>contact_mail</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Contact</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar color="indigo" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout
          justify-center
          align-center
        >
          <v-tooltip right>
            <v-btn icon large :href="source" target="_blank" slot="activator">
              <v-icon large>code</v-icon>
            </v-btn>
            <span>Source</span>
          </v-tooltip>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer color="indigo" app>
      <span class="white--text">&copy; 2017</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      drawer: null
    }),

    props: {
      source: String
    }
  }
</script>

開発用のサーバーを起動。

$ yarn dev

http://localhost:3000 にアクセスして確認。

いい感じ