素肌にサスペンダー

個人的な備忘と日記

Vue.js

【Vuetify】Nuxt.jsのCSSでVuetifyのcolor変数を読み込む方法

nuxt.config.jsのVuetify > optionsにcustomProperties: trueを追記する。 nuxt.congif.js ... vuetify: { .... options: { customProperties: true } }, }, ... CSSに、var(--v-primary-base)のように記述すれば、変数を利用できる。 background: var(--v-p…

【Vue.js】i18nを使用時に<br>タグで改行させる方法

vueのtemplate内で、<br>タグを含む言語を読み込む場合、そのままマスタッシュ記法で読み込まず、v-htmlを使う。 vueファイル <template> <p>{{ $t('text') }}</p> <p v-html="$t('text')"></p> </template> 言語ファイル /locales/ja.json export default { text: '改行します<br>改行されました', }

vuex-persistedstateで一部のstateのみ永続的に保存したい場合

ログイン情報など、リロードなどをしても永続的にvuexのstoreに値を保持したい時に便利なvuex-persistedstate github.com npmインストールし、 npm install --save vuex-persistedstate 以下のように呼び出すことで利用できる (/store/index.js) import Vu…

Vue.jsで、特定の要素が画面に表示されたら実行したい時に便利なvue-intersect

vue-intersectがシンプルで便利だったので、使い方をメモ。 こちらを参考にインストール github.com NPM npm install vue-intersect --save Yarn yarn add vue-intersect 使い方 使いたいVueファイルに、importして、@enter=で表示した時に実行したいmethods…