Ao importar o componente , estou me deparando com um erro no VSCode: Could not find a declaration file for module './Tag.vue'. 'c:/Users/mathe/Documents/Alura/Projetos/Cooking Up/cooking-up/src/components/Tag.vue' implicitly has an 'any' type.ts-plugin(7016).
Além disso, o console do navegador está apresentando um aviso:
[Vue warn]: Failed to resolve component: Tag If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at at
Por último, ao inspecionar os elementos da section no navegador, vê-se que as tags li foram criadas, mas o componente de fato não está sendo renderizado.
Código do componente ConteudoPrincipal:
`
<script lang="ts">
import SelecionarIngredientes from "./SelecionarIngredientes.vue";
import Tag from "./Tag.vue";
export default {
data() {
return {
ingredientes: ["Alho", "Manteiga", "Orégano"],
};
},
components: { SelecionarIngredientes },
};
</script>
<template>
<main class="conteudo-principal">
<section>
<span class="subtitulo-lg sua-lista-texto">Sua lista:</span>
<ul v-if="ingredientes.length" class="ingredientes-sua-lista">
<li v-for="ingrediente in ingredientes" :key="ingrediente">
<Tag :texto="ingrediente" />
</li>
</ul>
<p v-else class="paragrafo lista-vazia">
<img
src="../assets/imagens/sem-receitas.png"
alt="Ícone de pesquisa."
/>
Sua lista está vazia. Selecione ingredientes para começar.
</p>
</section>
<SelecionarIngredientes />
</main>
</template>
`
Código do componete Tag:
`
<script lang="ts">
export default {
props: {
texto: { type: String, required: true },
},
};
</script>
<template>
<span class="tag">
{{ texto }}
</span>
</template>
`
