Nuxt.jsでリンクカードを簡単に実装する方法

<script setup lang="ts">
import { onMounted, ref } from "vue";
const props = defineProps({
  propsUrl: String,
  title: String,
  siteUrl: String,
  description: String,
});

// 環境変数を取得
const isDev = import.meta.env.VITE_APP_ENV === "development";

// リアクティブなデータとしてogpDataを定義
const ogpData = ref(null);

if (isDev) {
  // dev時
  onMounted(async () => {
    try {
      const data = await $fetch(`/api/ogp?url=${encodeURIComponent(props.propsUrl)}`);
      console.log("APIレスポンス:", data);
      ogpData.value = data;
    } catch (error) {
      console.error("Fetch error:", error);
    }
  });
} else {
  // generate時
  const { data, error } = await useFetch(
    `/api/ogp?url=${encodeURIComponent(props.propsUrl)}`
  );
  if (error.value) {
    console.error("Fetch error:", error.value);
  } else {
    ogpData.value = data.value;
  }
}
</script>
<template>
  <div class="link-card" v-if="ogpData">
    <a :href="propsUrl" target="_blank" rel="noopener">
      <div class="link-card-content">
        <div class="sm:basis-1/4 tb:basis-5/7 self-center">
          <img :src="ogpData.ogImage?.[0]?.url || '/img/ogp.png'" alt="OG Image" />
        </div>
        <div class="sm:(pt-2 flex-grow-2) tb:pl-2">
          <h3 class="m-0 p-0 text-24px">{{ ogpData.ogTitle || props.title }}</h3>
          <p class="mt-1 mb-2 p-0 underline text-sm">{{ ogpData.ogUrl || props.siteUrl }}</p>
          <p class="m-0 p-0">{{ ogpData.ogDescription || props.description }}</p>
        </div>
      </div>
    </a>
  </div>
  <div v-else>
    <p>Link Card Loading...</p>
  </div>
</template>
<style scoped lang="scss">
.link-card {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
  transition: box-shadow 0.3s;
  a {
    text-decoration: none;
    &::after {
      content: none;
    }
  }
}
.link-card img {
  max-width: 100%;
  height: auto;
  display: block;
}
.link-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.link-card-content {
  text-align: left;
  display: flex;
}
.link-card-content {
  @screen at-sm {
    flex-direction: column;
    align-self: start;
  }
  @screen tb {
    flex-direction: row;
    align-self: center;
    & h3 {
      @apply text-h4_sm line-height-h3;
    }
  }
}
</style>

import vue from '@vitejs/plugin-vue'

export default defineNuxtConfig({
  // ... 他の設定

  vite: {
    plugins: [
      vue({
        template: {
          customElement: true,
        },
      }),
    ],
    define: {
      'import.meta.env.VITE_APP_ENV': JSON.stringify(process.env.VITE_APP_ENV),
    },
  },
})

::link-card{propsUrl="https://exanple.com"}
::

或いは、Block Components形式で、
::link-card
---
propsUrl: "https://exanple.com"
---
::

<template>
  <LinkCard
    propsUrl="https://example.com"
  />
</template>

VITE_APP_ENV='development'

mv .env .env.local

{
  "scripts": {
    "dev": "nuxi dev --dotenv --env.local -o",
    "generate": "nuxi generate"
  }
}