Vuetifyのコンポーネントでリンクがnuxt-linkであると指定する

これはなに

Vuetifyのコンポーネントでリンクがnuxt-linkであると指定する方法のメモ。

メモ

Vuetifyのコンポーネントで、toによる遷移を<NuxtLink>による遷移と同じ扱いにするには、そのコンポーネントにnuxt属性を追加する。たとえば、<v-list-item>のtoで指定したリンクをNuxtLinkと同じ扱いにするには、<v-list-item>にnuxt属性を追加すればよい。

<v-list-item
    nuxt
    title="about"
    :value="about"
    :to="/about"
/>

これによりリンクがnuxt-linkであると指定でき、ページの中で更新が必要な箇所だけ更新されるようになる。

参考文献・URL

Vuetify — A Material Design Framework for Vue.js

Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich applications.

v2.vuetifyjs.com

Vuetifyのコンポーネントをnuxt-linkの要素みたく扱う - Minerva

minerva.mamansoft.net