Nuxt.js で buefy を試す方法 version 2018-10-11

あらすじ

いくつかハマった点があったのでメモ

以前記事にもしましたが isClient というメソッドは現在ご利用できません。

vue init nuxt-community/starter-template practice-nuxt-buefy && cd $_  
yarn

nuxt.config.js を以下のように修正します。

-    extend (config, { isDev, isClient }) {
-      if (isDev && isClient) {
+    extend (config, { isDev }) {
+      if (isDev && process.client) {

動作確認

yarn run dev

上記のプロジェクトに buefy を追加します。

yarn add buefy

add plugin: create plugins/buefy.js

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

edit nuxt.config.js

         })
       }
     }
-  }
+  },
+  plugins: [
+    { src: '~plugins/buefy', ssr: false }
+  ],
 }

どうやら buefy が内部で File オブジェクトを使用してるようですが、これは Node.js にはない、ブラウザのみのインターフェースなので ssr: false にしないと最初のリクエスト(一番最初のレンダリングは Node.js 側で行う)で以下のようなエラーが発生します。

error ReferenceError: File is not defined

こちらからは以上です。