vue-fontawesomeでfarのアイコンを使う

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

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

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

vue-fontawesomeで初期レンダリングで大きく表示されるとき

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

参考はこちら。
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',
  ],

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

nuxtでrefsを使うとき

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

<template>
<div ref="test"></div>
</template>
mounted: function () {
  cosole.log(this.$refs.test)
}

Nuxtでプラグインが使えない時の注意点

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)

としてみましょう。

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