Nuxt 3 with Props

概要

Nuxt３でPropsを実装する方法

ボタンのクラスは、Tailwindを使用しています。
設定方法は、下記の記事にアップしています！

手順

１. コンポーネントを作成

components/atoms/TheButton.vue

<script setup lang="ts">
interface Props {
  name: string
  to?: string
}

const props = withDefaults(defineProps<Props>(), {
  name: '',
  to: '/'
})
</script>

<template>
  <div>
    <a :href="to" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
      {{ name }}
    </a>
  </div>
</template>

２. コンポーネントを呼び出し

pages/index.vue

<script setup lang="ts">
interface Menus {
  name: string
  to: string
}[]

const menus = reactive<Menus>([
  { name: 'ホーム', to: '/home' },
  { name: 'マイページ', to: '/mypage' },
  { name: '設定', to: '/setting' }
])
</script>

<template>
  <div>
    <!-- 単発で呼び出し　-->
    <AtomsTheButton name="ホーム" to="/home" />

    <!-- ループで呼び出し -->
    <div v-for="(v, k) in menus" :key="k">
      <AtomsTheButton :name="v.name" :to="v.to" />
    </div>
  </div>
</template>

完了！！