Vue.js
Nuxt.jsで複数のlayoutsファイルを作成して適用する方法
Nuxt.jsで複数のlayoutsファイルを作成して適用する方法を紹介します。layouts/に新しいVueファイルを置き、ページ側でlayoutプロパティ（Nuxt 3ならdefinePageMeta）を指定するだけで切り替えられます。
ARCHIVE
月: 2021年6月
CSS
SVGをCSSでレスポンシブにする方法｜viewBox・width・heightの設定
SVGを縦横比を保ったままレスポンシブ表示するCSSを解説。viewBox、width:100%、height:autoの役割、インラインSVGとimg要素の違い、縮まない・はみ出す原因も整理します。
CSS
unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順
おしゃれなSVGファイルを無料で扱っているunDrawのSVGファイルを、無料から使えるデザインツールであるFigmaで加工して、SVGファイルをCSSでアニメーションさせるための下準備の手順を紹介します。
Vue.js
Vue3 CompositionAPIでクリップボードにコピーする方法
Vue3 CompositionAPIでクリップボードにコピーする方法を紹介します。標準のnavigator.clipboard.writeText()で済ませる最短の書き方と、clipboard.js・vue-clipboard3を使う方法をまとめました。
Vue.js
Vue 3で画像を表示する方法｜Viteのassets・public・動的srcを解説
Vue 3 + Viteで画像を表示する方法を解説します。src/assetsの静的import、public、動的な:src、new URL、import.meta.glob、CSS背景画像、@ alias、require・~@が動かない理由、Nuxt 4との違いと本番buildの404対策まで整理します。
Vue.js
Vue3(CompositionAPI)で複数スライダーを動的に作成する方法
Vue3(CompositionAPI)で複数スライダーを動的に作成する方法を紹介します。 Githubにソースコードを上げています。
Vue.js
Nuxt.jsのlayoutsとpagesとcomponentsの使い分け
Nuxtのプロジェクトを作成すると、layoutsとpagesとcomponentsフォルダが作成されます。 layoutsとpagesとcomponentsの使い分けについて紹介します。
Vue.js
Nuxt.jsの3つのモード(SSR、SPA、プリレンダリング)のメリットとデメリットについて
Nuxt.jsの3つのモード(SSR、SPA、プリレンダリング)のメリットとデメリットについて紹介します。
JavaScript
JavaScriptの!!(エクスクラメーション)２つの意味
JavaScriptの!!(エクスクラメーション)２つの意味について紹介します。 JavaScriptの!!(エクスクラメーション)２つの意味...
Vue.js
vuexでリロードされても情報を永続化できるvuex-persistedstateの使い方
vuexを使っていてリロードされた場合、表示しておいてほしい情報でもstateがリセットされてしまって、表示できなくなります。 vuex-persistedstateというプラグインを使うとstateの情報を永続化できます。 vuex-persistedstateの使い方をまとめました。
Vue.js
VueでSASS(SCSS)が使えないときの対処方法(グローバル での読み込み)
VueでSASS(SCSS)が使えないときの対処方法を紹介します。 VueでSASS(SCSS)が使えないときの対処方法は・・・
Vue.js
Vue.jsで作成したフロントエンドをNetlifyで公開するときに.envの環境変数が読み込まれないとき
Vue.jsで作成したフロントエンドをNetlifyで公開するときに.envの環境変数が読み込まれないときの対処方法です。
Git
Firebaseのhostingのcacheを削除してgitignoreに登録する方法
Firebaseのhostingサービスを利用すると、`.firebase/hosting.[記号の羅列].cache`というキャッシュファイルが作成されます。 プロジェクト自体には不要なため、.gitignroeファイルに登録します。
Vue.js
Error: firestore.indexes.json does not existが出たときの対処方法
Error: firestore.indexes.json does not existが出たときの対処方法を紹介します。
Vue.js
Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions.
firebaseのfirestoreをアプリケーションで利用しているときに、ログアウトすると、snapshot listenerのエラーが次のように出た場合の対処方法です。 Uncaught Error in snaps…
Vue.js
vuex-persistedstateで永続化したstateデータを初期化する方法
vuex-persistedstateで永続化したstateデータを初期化する方法を紹介します。 vuex-persistedstateで永続化したstateデータを初期化する方法 src/store/index.jsに…
Vue.js
【Vuex】Firebaseのfirestoreのドキュメント自動生成IDを事前取得して追加する方法
Firebaseのfirestoreでは、ドキュメントのユニークなIDを自動生成することができます。 ドキュメントを追加する前に自動生成IDを取得できれば、ドキュメントの中にも入れることができて便利です。 ドキュメント追加前に自動生成IDを取得する方法を紹介します。
Vue.js
Vue.jsのtransitionコンポーネントnameを動的にして使う方法
Vue.jsのtransitionコンポーネントnameを動的にして使う方法を紹介します。 特に次へ、前へ、上へ、下へなどの似たようなアニメーションを設定する際に使います。