たくさんの自由帳

Nuxt.jsのプリフェッチがはやい

投稿日 : | 0 日前

文字数(だいたい) : 635

NuxtJSJavaScriptVuetify
Twitterで共有GitHubで開く

まずはこちらのGIFを見てください(3MBぐらい)

Imgur

左側は今まで、右側はNuxt.jsのSmart Prefeching機能を使ったページ遷移です。

押した瞬間に切り替わっていることが分かると思います。

Smart Prefeching とは

本家ブログ

ブラウザの表示領域にリンク<nuxt-link>を見つけたらそのリンクをブラウザが先読みする機能。これをプリフェッチ機能っていうらしい。

使い方

  • <nuxt-link>を使う
  • Vuetifyの場合
    • to="遷移先"nuxtを属性に付けることで利用可能。nuxtを付け忘れると機能しない。
    • GIFの用に<v-card>をページ遷移に使う際はこんな風に
<v-card
  class="ma-2 pa-5"
  to="`/posts/taihendattakoto"
  nuxt
>
</v-card>

以上です。