Error: 'HelloWorld' is defined but never used

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 issue and how to fix it? Getting this issue when using typescript, composition API, and pug templating together in vue3. And the concern is how to import a component using composition API and use that in pug template?

Answer 1

I'm pretty sure the issue comes from preinstalling typescript. Removing typescript as the script language should do the trick then:

<script setup>

instead of

<script setup lang="ts">

If you don't want to remove it then try to figure out how typescript-components need to look different from plain js ones. Sorry I don't know much about Typescript, all I know is that it changes how the components work because they rely more on Typescript now instead of javascript. But I would guess that there's information on the vue 3 documentation about working with typescript.