**環境情報**  
・Nuxt.js(ver:2系)  
・Vuetify（ver:2.6.1）

### 概要（実現したいこと）

Vuetifyの 「v-app-bar」に設定した画像に「a」または「NuxtLink」
タグを使いリンクを設置したいのですが、うまくいきません。該当のソースコードは下記になります。

### ソースコード

```

    <template>
      <div>
        <!-- ヘッダー -->
        <v-app-bar class="v-app-bar" color="grey" app light flat outlined clipped-left absolute>
          <template #img="{ props }">
            <nuxt-link to="/">
              <v-img :src="headerImageUrl" v-bind="props" class="header-image"> </v-img>
            </nuxt-link>
          </template>
        </v-app-bar>
      </div>
    </template>
    
```

### 結果

上記のようなソースにすると、このように出力されます

[![上記のように入力すると、このように出力されます](https://i.stack.imgur.com/Pp3uM.png)](https://i.stack.imgur.com/Pp3uM.png)

### 詳細

ソースコードについて、「<template #img="{ props
}">...」で画像を設定しているのは、Vueitfy公式で紹介されている方法です（[こちら](https://vuetifyjs.com/ja/api/v-app-
bar/#slots)）  
この方法を使用すると、v-app-
barによしなに画像が出力されるので、できればこれを使用したまま画像の部分にだけリンクをつけたい（結果画像の灰色部分にはリンクは付けたくない）のですが、期待通りの動作になりません（画像部分をクリックしても画面遷移が発生しません）

スタックオーバーフローで、同様の質問と回答を見つけたのですが（[こちら](https://stackoverflow.com/questions/68976710/nuxtjs-
vuetify-background-image-v-app-bar-as-a-href)）、回答の意図が把握できませんでした。

リンクが有効にならない理由は何でしょうか？また、別の方法でリンクを付けることができるでしょうか？  
ご存知の方がいらっしゃったら教えてください。  
説明がわかりづらく申し訳ありません。  
よろしくお願いいたします。
CC BY-SA 4.0
2022-11-20T06:28:58.173
92327
2022-11-21T01:03:44.527
2022-11-21T01:03:44.527
53656
53656
question
vue.js nuxt.js
Vuetifyの 「v-app-bar」 のImageにリンクをつけたい