Multiple components in SFC

Tip. You can define multiple components in a single Vue file.

It's a handy trick when you only need to unify repeating parts of a single component and don't need to make them reusable outside the component.

<template>
    <ul class="space-y-4">
        <Feature>10 videos per month</Feature>
        <Feature>Custom design</Feature>
        <Feature>HD export</Feature>
        <Feature>No watermarks</Feature>
    </ul>
</template>

<script>
import { CheckIcon } from '@heroicons/vue/outline';

const Feature = {
    components: { CheckIcon },
    template: /*html*/ `
    <li class="flex items-center">
        <div class="flex-shrink-0">
            <CheckIcon class="w-4 h-4 text-sky-500" />
        </div>
        <p class="ml-3 text-sm font-medium text-white">
            <slot />
        </p>
    </li>`,
}

export default {
    components: { Feature }
}
</script>