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?
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.