カテゴリー: Nuxt.js

ドキュメントが少しわかりづらかったのでメモ。

store/index.js

export const strict = false

メモ書きですが、次も絶対ハマるので

https://github.com/FortAwesome/vue-fontawesome/issues/77

yarn add @fortawesome/fontawesome-free-regular

import { faCircle, faCheckCircle } from '@fortawesome/fontawesome-free-regular'

いつもコミュニティの力は素晴らしいと実感しています。

参考はこちら。
https://github.com/FortAwesome/vue-fontawesome/issues/14

nuxtのプラグインに次のように記述します。

import fontawesome from '@fortawesome/fontawesome'
fontawesome.config = {
  autoAddCss: false
}

nuxt.config.jsに次のように追記

  css: [
    '@fortawesome/fontawesome/styles.css',
  ],

これで解消されるはずです。

createdのタイミングではまだ参照できないので、mountedで使用する

<template>
<div ref="test"></div>
</template>

mounted: function () {
  cosole.log(this.$refs.test)
}

次のようにprocess.browserで解決します。

if (process.browser) {
  window.innerHeight
}

参考：
https://nuxtjs.org/faq/window-document-undefined/

Vue.jsで使えるのにNuxtで使えない場合が多々あります。

解決のポイントはssrです。

プラグイン化する

まずはNuxtのプラグイン化を行います。

pluginsに適当名前のファイルを作成します。

plugins/your-plugin.js

内容は必要としているプラグインのドキュメントをご確認ください。

nuxt.config.jsでプラグインを指定します。

ssr: falseが肝です。

plugins: [
  { src: '~/plugins/vue-full-loading', ssr: false }
],

カスタムコンポーネントを<no-ssr>タグで囲みます。

<no-ssr>
  <loading
    :show="isLoading"
    label="loading">
  </loading>
</no-ssr>

それでもエラーが出る場合は？

Vue.use(PluginName)

としているところを

Vue.component(PluginName)

としてみましょう。

作り方が人それぞれなので、ハマる部分ではあります。