Creación de Componentes Personalizados en Aplicaciones Web

Listo:
.
Product.js

...
<h4>{{ product.name.toUpperCase() }} {{ product.stock == 0 ? "😭" : "😎" }}</h4>

<badge :product="product"></badge>

<p class="description__status" v-if="product.stock == 3">Quedan pocas unidades</p>
...

index.html

...
    <script src="./Badge.js"></script>
    <script src="./Product.js"></script>

    <script>
        app.mount("#app");
    </script>
    
</body>
</html>

Badge.js

app.component("badge", {

    template: /* vue-html */ `
        <span class="badge new" v-if="product.new">Nuevo</span>
        <span class="badge offer" v-if="product.offer">Oferta</span>
    `,

    props: ["product"]

});

El código es el mismo para Options y Composition, dejo el repositorio completo:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/fcc9c3e03c7e44b2e5e7a49d2f6e03bfd3856006

Listo xD

# Badge.js
app.component("badge", {
  template: `
<span class="badge new" v-if="product.new">Nuevo</span>
<span class="badge offer" v-if="product.offer">Oferta</span>
`,
  props: ['product']
});

# Product.js
<badge :product="product"></badge>

# index.html
  <script src="./Badge.js"></script>

No es mucho, pero es trabajo honesto.
Lo que hice fu lo siguiente:

Agregue un nuevo array de badges a los productos

badges: [
	{	
        	title: 'Nuevo',
                name: 'new',
                status: true,
         },
        {
                title: 'Oferta',
                name: 'offer',
		status: true,
	},
]
                                	   

lo recorro de la siguiente forma:

<badge v-for="badge in product.badges" :badge="badge" />

Badges.js

app.component("badge", {
    template: /* vue-html */`
        <span class="badge" :class="badge.name"  v-if="badge.status">{{ badge.title }}</span>
    `,
    props: ["badge"]
});

Dejo mi aporte de como lo hice. Tengo una estructura un poco diferente porque estoy usando Typescript y y archivos .vue.

<template>
  <span class="badge new" v-if="product.new">Nuevo</span>
  <span class="badge offer" v-if="product.offer">Oferta</span>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name:"BadgesComponent",
    props:{ product : {}}
})
</script>

Budge.js

app.component("budge", {
    template: /* vue-html */`
    <span class="badge new" v-if="budge.new">Nuevo</span>
    <span class="badge offer" v-if="budge.offert">Oferta</span>
    `,
    props: ["budge"],
});

Product.js

<budge :budge="product"></budge>

index.html

<script src="./Budge.js"></script>

Es tal cual, copiar y pegar.
Esta seria la unica linea nueva como tal
<script src="./Badge.js"></script>

Hola, aquí como lo logré:

index.html

<script src="Badge.js"></script>

product.js

<Badge :product="product"></Badge>

Badge.js

app.component("Badge", {
  template: /* vue-html */`
    <span class="badge new" v-if="product.new" >Nuevo</span>
    <span class="badge offer" v-if="product.offer" >Oferta</span>
  `,
  props: [
    "product"
  ]
});

no me gusto el hecho de estar repitiendo el span una y otra vez, pero bueno, recien estoy aprendiendo vue y funciono xd

En Product.js:

<badges :product="product"></badges>
      <!-- <span class="badge new" v-if="product.new">Nuevo</span>
      <span class="badge offer" v-if="product.offer">Oferta</span> -->

En Badges.js:

app.component("badges", {
  template: `
    <span class="badge new" v-if="product.new">Nuevo</span>
    <span class="badge offer" v-if="product.offer">Oferta</span>
  `,
  props: ["product"]
})

Y en el index.html agregue, antes del script del Product.js :

  <script src="./Badges.js"></script>
  <script src="./Product.js"></script>

Mi solución:
//Product.js

            <section class="description">
            <h4>{{product.name.toUpperCase()}} {{ product.stock === 0 ? "😌" : "🥰" }}</h4>
            <badges :product="product"/>
            (...)

//Badjes.js

app.component("badges", {
    template: /* vue-html */`
        <span class="badge" 
        :class="{new: product.new}">{{product.new ? "Nuevo" : ""}}</span>
        <span class="badge" 
        :class="{offer: product.offer}">{{product.offer ? "Oferta" : ""}}</span>
    `,
    props: ["product"],

})

Listo el reto 😎🚀

Badge.js 👌

app.component("badge", {
  template: /* vue-html */ `
        <span class="badge new" v-if="product.new">Nuevo</span>
        <span class="badge offer" v-if="product.offer">Oferta</span>
    `,
  props: {
    product: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
});

Product.js 🦾

<badge :product="product"></badge>

Pues la verdad no me funciona ni copiando el código directamente.

Realizado.

Index.html

Agrupo los valores

badge: { new: true, offer: true },

e inserto

<script src="./bagde.js"></script>

Product.js

<badge :badge="product.badge"></badge>

Badge.js

app.component("badge", {
  template: /*vue-html */ `
    <section>
        <span class="badge new" v-if="badge.new">Nuevo</span>
        <span class="badge offer" v-if="badge.offer">Oferta</span>
    </section>
  `,
  props: ["badge"],
});

izy