プログラミング

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

プログラミング
この記事は約2分で読めます。
スポンサーリンク

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

スポンサーリンク

前提条件

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

NuxtJS

The Intuitive Vue Framework
Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful.

Vuetify

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 be...

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

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

スポンサーリンク
スポンサーリンク
スポンサーリンク
KoEをフォローする
CodeLab

コメント

タイトルとURLをコピーしました