Guide on building a Vue3 component with TypeScript, Pug Template engine, and Composition API

Question

Guide on building a Vue3 component with TypeScript, Pug Template engine, and Composition API

Whenever I try to export components within

<script setup lang="ts">

and then use them in

<template lang="pug">

, an error is thrown stating that the component is defined but never used. Here's an example:

<template lang="pug">
div
  // Even when using kebab-case, like hello-world, the same issue occurs
  HelloWorld
</template>
<script setup lang="ts">
import HelloWorld from'@/components/HelloWorld.vue';
</script>

The error message displayed is: Error: 'HelloWorld' is defined but never used

typescript vue.js pug vuejs3 vue-composition-api

Answer 1

Answer №1

Here is the solution I came up with:

<template lang="pug">
div
  // Make sure to use kebab-case, such as hello-world, to avoid any issues
  HelloWorld
</template>

<script setup lang="ts">
import HelloWorld from'@/components/HelloWorld.vue';
</script>

<script lang="ts">
export default {
  components: {
    HelloWorld,
  }
}
</script>

The key takeaway here is to clearly define our components. As mentioned on Vue.js documentation, we can use multiple script tags if necessary!

I hope you find this information helpful.

Answer 2

Here is the solution I came up with:

<template lang="pug">
div
  // Make sure to use kebab-case, such as hello-world, to avoid any issues
  HelloWorld
</template>

<script setup lang="ts">
import HelloWorld from'@/components/HelloWorld.vue';
</script>

<script lang="ts">
export default {
  components: {
    HelloWorld,
  }
}
</script>

The key takeaway here is to clearly define our components. As mentioned on Vue.js documentation, we can use multiple script tags if necessary!

I hope you find this information helpful.

Guide on building a Vue3 component with TypeScript, Pug Template engine, and Composition API

Answer №1

Similar questions

Angular 9: Implementing a synchronous *ngFor loop within the HTML page

A guide on utilizing ESLint to lint expressions within Vue template code

The HttpInterceptor is programmed to identify and capture 401 error responses

Tips for incorporating a development server proxy with Ionic and Vue

Error message: Material Design UI - The type 'string' cannot be assigned to the type Icon

Setting up a Vue 3 parent component to emit events to a child component: a step-by-step guide

Trouble with Vue select not linking to the model

Distribution running of VueJS doesn't show styles

What are the steps to effectively implement the useEffect hook in React?

Creating custom TypeScript validation types at compile time

Define the data type for the toObject function's return value

Adding a dynamic style programmatically to an element created using createElement in Vue: A guide

What is the best way to efficiently filter this list of Outcome data generated by neverthrow?

Dealing with Angular 2's Http Map and Subscribe Problem

Ways to evaluate a String that is thrown using Jest

Conceal the header on signup and login pages using Material UI

Error in Typescript: 'SyncClient' not found in Twilio

Leverage the power of Typescript to flatten a JSON model with the help of Class

Vuetify: Utilizing Time Range Inputs for Start and End Time

Decrease the construction duration within a sprawling Angular 8 project