【Nuxt3】Vueで再利用できるボタンコンポーネントを作ろう

2024年1月8日2024年1月25日

運営者：そうすけ

30代のブロガーとエンジニア。
工場勤務→情シス→ソフトウェアエンジニア
主にフロントエンド開発を行っています。

趣味はガジェットと植物。

駆け出しエンジニアのそうすけです！

Webアプリでコンポーネントの再利用が多いのは入力フォームやボタンかと思います。

処理・表示・スタイルをいちいち変えるのは面倒…
再利用したいけど、どう実装したらいいの？

そういった方に向けての記事になります。

実装例

アプリのボタンに戻るこんなコンポーネントを作ります。

<template>
        <h1>アプリ</h1>
         <div class="text-right"> 
            <ButtonPrimary :on-click="goBack">アプリTOPに戻る</ButtonPrimary>
         </div>
        </h1>
</template>

<script>
//アプリのトップに戻る関数
const goBack = () => {"/");
}

</script>

<template>
    <button
    class="rounded-md bg-accent-200 py-1 px-4 text-sm shadow-md hover:opacity-20 dark:border-2 dark:border-accent-300 dark:bg-coffee dark:text-accent-200"
    v-on:click="onClick()"
    >
      <slot/>
    </button>

</template>
<script setup lang="ts">
const props = defineProps<{
    onClick:Function
}>();
</script>

ポイント

propsで関数を渡せる状態にしておく
型をFunctionにしておくことで戻り値・引数がる場合も対応できるようにしておく
slotで名前を変えれるようにする

まず。propsを定義して、親から関数を渡せる状態にしておきます。

そしてFuctionに型定義することで、引数・戻り値の型を指定しない方にしています。

typescript的にはあまりよくない書き方なので明示的に戻り値がないことを書きたい方は下記のようにアロー関数とvoidでできます。

<script setup lang="ts">
const props = defineProps<{
    onClick: () => void;
}>();
</script>

そしてボタンタグの間を<slot/>で名前を変えれるようにすることで、同じbuttonのコンポーネントで名前のみ変えることができます。

    <button
    class="rounded-md bg-accent-200 py-1 px-4 text-sm shadow-md hover:opacity-20 dark:border-2 dark:border-accent-300 dark:bg-coffee dark:text-accent-200"
    v-on:click="onClick()"
    >
      <slot/>
    </button>