Vuetifyの導入

[takanori-matsushita]

HTMLでいうBootstrap的なフレームワークの立ち位置のVuetifyを導入する。 参考リンク

[takanori-matsushita]

Vuetifyのインストール yarn add vuetify Webpackを編集するライブラリのインストール yarn add webpack-node-externals -D

[takanori-matsushita]

src/main.jsを以下のように変更

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api

import DefaultLayout from '~/layouts/Default.vue'

// 次のライブラリをimport します。
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import colors from 'vuetify/es5/util/colors'
import 'prismjs/themes/prism-tomorrow.css'

export default function (Vue, { router, head, isClient, appOptions }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)

  Vue.use(Vuetify);
  appOptions.vuetify = new Vuetify({
    customVariables: ['~/assets/css/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.grey.darken4,
          accent: colors.shades.black,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  })
}

[takanori-matsushita]

prismjsも導入しないといけないっぽいので、以下のコマンドでインストール yarn add prismjs これでエラーが解消した。

[takanori-matsushita]

gridsome.server.jsも以下のように変更

// Server API makes it possible to hook into various parts of Gridsome
// on server-side and add custom data to the GraphQL data layer.
// Learn more: https://gridsome.org/docs/server-api/

// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`
const nodeExternals = require('webpack-node-externals')

module.exports = function (api) {
  api.loadSource(({ addCollection }) => {
    // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
    api.chainWebpack((config, { isServer }) => {
      if (isServer) {
        config.externals([
          nodeExternals({
            whitelist: [/^vuetify/, /\.css$/]
          })
        ])
      }
    })
  })

  api.createPages(({ createPage }) => {
    // Use the Pages API here: https://gridsome.org/docs/pages-api/
  })
}