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

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

前提条件

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

NuxtJS

https://nuxtjs.org/

Vuetify

https://vuetifyjs.com/ja/

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を使用するというちょっとした小技的なものを説明してきました。

こういった小技でも有効活用することで開発効率を向上させることができたりするので、実装方法を忘れないようにしたいですね。

コメントする

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