【Vuetify】v-btnでリンクを作成！CSSもあわせて紹介

Vuetifyを使用していて、リンクを作成したい場合はありませんか？

しかし、折角Vuetifyを使っているのにaタグを用いてリンクを作成したくはないですよね。
この記事では、Vuetifyのv-btnを使ってリンクを作成する方法を紹介します。

環境

• Nuxt
  • 2.15.7
• Vuetify
  • 2.5.5

作成したもの

以下のようなリンクを作成しました。
文字にリンクを埋め込んでいる形になります。

サンプルコード

template

まずは、template側から紹介します。

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="6">
        <template>
          <v-simple-table>
            <template v-slot:default>
              <thead>
                <tr>
                  <th class="text-left">タスク</th>
                  <th class="text-left">期限</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in taskList" :key="item.name">
                  <td class="text-left">
                    <v-btn :to="item.path" text class="c-link-btn">{{
                      item.name
                    }}</v-btn>
                  </td>
                  <td class="text-left">{{ item.deadlineAt }}</td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </template>
      </v-col>
    </v-row>
  </v-container>
</template>

v-btnでtoを指定することで、内部リンク先を指定しています。
また、textを付与することによってボタンではなく文字として見えるようにしています。

CSS

.c-link-btn {
  height: 100%;
  display: inline-block;
  color: #1976d2;
  text-decoration: underline;
  text-transform: none;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}

CSSでは、以下を実現するような形で書きました。

• 文字が次の行にはみ出さないようにする
• リンクが長い時に折り返す
• デフォルトで大文字に変換される場合、小文字にする

※他のCSSが影響を与えて上手く反映されない可能性があるので、あくまでもご参考までとして下さい。

まとめ

v-btnでリンクを作成する方法を紹介しました。

実装にあたっては、以下の記事を大変参考にさせて頂きました。
https://qiita.com/ryotanny/items/35270f15e2c29e474d18