NuxtJS Logo

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

NuxtJSVuetify を使用して v-btnnuxt-link にする方法を説明したいと思います。

前提条件

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

NuxtJS

Vuetify

nuxt-link について

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

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

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

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

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

実装方法

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

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

最後に

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

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です