Tekrog

プログラミングの備忘録と情報発信

カテゴリー別記事一覧

Vue.js

ProvideとInjectをComposition APIとTypeScriptで解説

ProvideとInjectをComposition APIとTypeScriptで解説

Vue3におけるProvideとInjectをComposition APIとTypeScriptで解説していきます。

TypeScript
Vue.js
【Vue3】watch系関数の違いと使い方(watchSyncEffect・watchPostEffect含)

【Vue3】watch系関数の違いと使い方(watchSyncEffect・watchPostEffect含)

Vue3.2の時点でwatch系のAPIはwatch / watchEffect / watchPostEffect / watchSyncEffectの4種類あります。<br /> それぞれの意味と違いをご存知でしょうか。今回はこの4種類のwatchについて解説していきます

Vue.js
Vue3+Laravel+Pythonでスクレイピング

Vue3+Laravel+Pythonでスクレイピング

Vue3、Laravel、Pythonを用いて簡単なWebスクレイピングを行うSPAを試作しました。その時の備忘録です。

Laravel
Python
Vue.js
【Vue3】script setup構文の使用方法とメリット【propsとemitsも解説】

【Vue3】script setup構文の使用方法とメリット【propsとemitsも解説】

script setup構文の使用方法やメリットについて解説します。propsやemitsなどの特有な書き方も節目しています。

Vue.js
Vueのライブラリ「VueUse」とは?

Vueのライブラリ「VueUse」とは?

VueUseはVueの開発で遭遇する「よくある機能」をロジック単位で切り出し、それを関数として簡単に利用できるライブラリです。この記事ではVueUseの必要性や基本的な使い方、いくつかの関数をピックアップして紹介します。

Vue.js
【Laravel】BladeファイルでVue3のコンポーネントを利用する方法【Vue3】

【Laravel】BladeファイルでVue3のコンポーネントを利用する方法【Vue3】

MPAにおいて、LaravelのBladeファイルの中でVue3.jsのコンポーネントを利用する方法を紹介します。createAppの記述方法に注意しないと、意図した結果が得られないので注意が必要です。 目次1 Blad [&hellip;]

Laravel
Vue.js
スクロールスナップ+Vueで遷移前のページ位置に戻る方法

スクロールスナップ+Vueで遷移前のページ位置に戻る方法

CSSでスクロールスナップの指定をするとスクロール量が取得できなくなります。これが原因で、Vue Routerで他のURLへ遷移して元のURLに戻る際、遷移前にいたスクロール位置に戻るコードに少し工夫が必要になります。この記事ではこの要件を満たしたコードを紹介します。

CSS
Vue.js
v-for指定した要素のテンプレート参照方法【Vue3】

v-for指定した要素のテンプレート参照方法【Vue3】

Vue.jsにおいてv-forでHTML要素を繰り返し作成したとき、それぞれの要素に対してテンプレート参照する方法を解説します。ただしVue3のComposition APIのみを対象としています。また、要素の生成から参照するまでのタイミングや挙動、watchとの利用や注意点についてもまとめています。

Vue.js
【Laravel Vite】簡単なセットアップ方法とエラーの対処法

【Laravel Vite】簡単なセットアップ方法とエラーの対処法

Laravel Viteの簡単なセットアップ方法と、発生するかもしれないエラー「There are no commands defined in the &#8220;vite&#8221; namespace.」の対処方法について説明します。

Laravel
Vue.js
【Vue3+TypeScript】v-onイベントハンドラの引数のキャスト

【Vue3+TypeScript】v-onイベントハンドラの引数のキャスト

v-onディレクティブで紐づけた「イベントハンドラ」や「トランジションフック」の引数から要素ノードのプロパティを参照、アクセスしようとするとTypeScriptではエラーが出てしまいます。そこで引数のダウンキャストが必要なのですが、「イベントハンドラ」と「トランジションフック」でそれぞれキャストの方法が違うので順番に説明します。

Vue.js