Multiple components in SFC

By @boris · 2021-08-30 14:33

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.

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

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" />
        <p class="ml-3 text-sm font-medium text-white">
            <slot />

export default {
    components: { Feature }
  • By @samuel · 2021-08-31 18:39

    Didn't know you can do this, that's cool. I always disliked creating files for simple one-off components, so this seems like a lot better way to use clean up code in those cases