[Nuxt.js] Vuetify에서 a 태그를 사용하지 않고 외부 링크 구현

Nuxt.js는 링크를 구현할 때 페이지를 라우팅하는 경우 구성 요소를 사용하는 것이 좋습니다. 외부 링크의 경우 a 태그를 사용합니다. 다만, 그렇다면 외형을 바꾸고 싶어도, CSS를 쓰는 것이 귀찮고 Vuetify를 사용하는 장점을 살릴 수 없습니다.
그래서 이 기사에서는 외부 링크를 v-btn 컴퍼넌트로 구현해, 적은 코드의 기술량으로 좋은 외형의 링크를 작성하는 것을 목표로 합니다. 완성도는 다음 이미지입니다.




둘 다 호버 한 상태의 이미지입니다. 왼쪽이 light 모드이고 오른쪽이 dark 모드에서의 이미지가 되어 있습니다.
모드에 따라 문자색을 바꾸고 있습니다. 구현 방법은 이전에 기사를 게재하고 있으므로 그쪽을 참고하십시오. (참고 URL: [Nuxt.js] Vuetify 테마 사용 )

[사전] v-btn 구성 요소를 링크로 처리

v-btn에는 href라는 props가 있습니다. 이것은 HTML a 태그의 href 속성과 동일하며 실제로 구현하고 시작한 것을 개발자 도구로 보면,

// Vue上
<template>
  <v-btn href="https://hoge.example">https://hoge.example</v-btn>
</template>

// デベロッパーツール上
<a href="https://hoge.example">https://hoge.example</a>

되고 있어, a 태그로서 취급되고 있습니다. 그렇다면 처음부터 a 태그를 사용해도 좋지 않을까 생각할지도 모릅니다만, 완성도에도 있듯이 Vuetify의 테마에 의해 색을 바꾸도록 하고 있습니다. 이 경우 Vuetify 구성 요소를 사용하여 color props를 사용해야합니다. 색을 바꿀 필요가 없는 경우는, a태그에 스타일을 맞추어 가면 됩니다만 모처럼이므로 이용할 수 있는 물건은 이용합시다!

[본제] 외부 링크 구현

이번 내가 생각한 구현이 이쪽이 됩니다.

      <v-card>
        <v-card-title class="pb-0 d-flex flex-column align-start">
          <span class="title">TITLE</span>
        </v-card-title>
        <v-card-text class="d-flex align-center">
          <span class="mr-1">Link:</span>
          <v-btn
            href="https://hoge.example"
            text
            color="link"
            min-height="20"
            class="x-small post-link align-center py-1 px-2"
          >
            <span class="text-left">https://hoge.example</span>
          </v-btn>
        </v-card-text>
      </v-card>

// これは必須
.post-link {
  display: inline-block;
  word-break: break-all;
  padding: 2px 8px;
  border-radius: 5px;
  text-transform: none !important;
  white-space: normal;
  max-width: calc(100% - 30px);
  height: inherit !important;
}

외모를 신경 쓰고 다양한 스타일을 맞추고 가면 본제와 관계없는 카드로도 노력하고있었습니다 ... 웃음
자, v-btn 컴퍼넌트에 대해서입니다만, 주요한 것을 설명합니다.

href

href는 앞에서 설명했듯이 v-btn 구성 요소에서 href 속성을 사용할 수 있습니다.

텍스트

text는 배경을 투명하게 하고, 호버시에 투명도가 있는 배경이 붙습니다. 이것에 의해 호버하고 있지 않을 때는 링크와 같이 보입니다.

color

color는 문자색과 배경색이 결정합니다. 「link」는 이번은 nuxt.config.js로 스스로 설정한 색이 되고 있어, 이번은 이하의 정의를 하고 있습니다.

nuxt.config.js

vuetify: {
    customVariables: ["~/assets/variables.scss"],
    theme: {
      dark: true,
      themes: {
        light: {
          link: "#1976d2"
        },
        dark: {
          link: "#91ceff"
        }
      }
    }
  }

CSS

CSS에서 제공하는 효과로
- 링크가 길 때 카드 내에서 접기
- 기본적으로 문자가 대문자이면 소문자로 설정
를 들 수 있습니다.

이상이 됩니다. 디자인의 참고로 해 주세요.