[NuxtJS]Vuetify の v-btn を nuxt-link として使う方法

NuxtJS で Vuetify を使用して v-btn を nuxt-link にする方法を説明したいと思います。

前提条件

• nuxt : ^2.15.7
• vue : ^2.6.14
• vuetify : ^2.5.5

NuxtJS

Nuxt: The Intuitive Vue Framework

Nuxt is an open source framework that makes web development ...

nuxtjs.org

Vuetify

Vuetify — A Vue Component Framework — Vuetify

VuetifyはVue用のオープンソースのUIコンポーネントフレームワークで、デザインスキルを必要としません。美しくコン...

vuetifyjs.com

nuxt-link について

NuxtJS で使用できるコンポーネントです。こんな感じで使用します。

<nuxt-link to='/'>Nuxt Link</nuxt-link>

<router-link> みたいに使用することができます。

v-btn に nuxt-link を使用する

v-btn という Vuetify のコンポーネントを使用することでデザインが綺麗なボタンを実装できます。せっかくなので、 nuxt-link にもこのデザインを適用させたいと思い、 v-btn で nuxt-link を使用してみたいと思いました。

実装方法

<v-btn nuxt to='/' text rounded class="my-2 text-decoration-none" color='primary'>リンク</v-btn>

v-btn コンポーネントに nuxt プロパティと to プロパティを設定することで v-btn で nuxt-link を使用することができます。

最後に

v-btn で nuxt-link を使用するというちょっとした小技的なものを説明してきました。
こういった小技でも有効活用することで開発効率を向上させることができたりするので、実装方法を忘れないようにしたいですね。