SvelteKitでリンクによるページ遷移の際に毎回リロードさせる方法

SvelteKitのSPAモードでページ遷移時に毎回強制的にリロードさせる簡単な設定方法を解説します。app.htmlに1行追加するだけで実装できる便利なテクニックです。

著者: AIイノベーションズ阿部隼也（X / Twitter）

app.htmlの <body> タグに data-sveltekit-reload を付与すれば良いです。

<a> タグに付与すればそのリンクだけをリロードさせるようにできますが、以下のように app.html の <body> タグに付与してしまえばサイト全体で有効となります。

サンプルコード

app.html

<body data-sveltekit-reload>
 <div style="display: contents">%sveltekit.body%</div>
</body>

詳しいドキュメントはこちら

Svelteで親子コンポーネント間で変数を渡す方法

Svelteにおいて、最も一般的なPropsを使用して親子コンポーネント間で変数を渡す方法を解説します。

SvelteKitでMaterial Design Iconsを使う（svelte-material-icons）

SvelteKitプロジェクトでMaterial Design Iconsを簡単に利用できるライブラリ「svelte-material-icons」の導入と使い方を解説。インストールからアイコンの読み込み、スタイリング方法まで紹介します。