Our team has embarked on a new project using Vue 3 for the front end.
We have opted to incorporate TypeScript and are interested in implementing a file-separation approach. While researching, we came across this article in the documentation which provides an example. Unfortunately, the example does not demonstrate how to achieve this with TypeScript.
We attempted the following structure:
/components
┗ /SideBarBtn
┣ sidebar-btn.scss
┣ sidebar-btn.ts
┗ sidebar-btn.vue
sidebar-btn.vue
<template>
<h1 class="test">This is a test</h1>
</template>
<script lang="ts" src="./sidebar-btn.ts"></script>
<style lang="scss" src="./sidebar-btn.scss"></style>
sidebar-btn.scss
.test {
color: blue;
}
sidebar-btn.ts
import { defineComponent } from "vue";
export default defineComponent({
name: "SideBarBtn",
});
Home.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<SideBarBtn />
</div>
</template>
The command npm run serve runs without errors and the page loads successfully. However, the component remains invisible and a warning message appears in the console stating "Component is missing template or render function."
How can we resolve this issue?