Unused definition: "HelloWorld"

Question

App.vue file

<template lang="pug">
div
  hello-world
</template>
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
</script>

HelloWorld.vue file

<template lang="pug">
div
  h1 {{ msg }}
</template>

<script setup lang="ts">
import { ref } from "vue";

const msg = ref<string>("Hello World!!!");
</script>

What is the problem and how to solve it? Encountered this issue when using typescript, composition API and pug template together in vue3. Concerned about how to import a component using the composition API and use it in a pug template?

Answer 1

I'm pretty sure the problem comes from pre-installing typescript. Removing typescript as a scripting language should do the trick:

instead of

If you don't want to remove it, try to find out how the typescript component looks different from the normal js component. Sorry, I don't know much about Typescript, all I know is that it changed the way components work as they now rely more on Typescript than javascript. But I guess the vue 3 documentation has information about using typescript.