ドキュメントが少しわかりづらかったのでメモ。
store/index.js
export const strict = false
オープンソースの情報をわかりやすく
ドキュメントが少しわかりづらかったのでメモ。
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)
としてみましょう。
作り方が人それぞれなので、ハマる部分ではあります。