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

Implementing unique union type in React: Effective ways to declare typescript type for prop value

server running on node encountered an error due to a port that is already in use

Having trouble getting Safari to load preflight CORS authentication requests (XHR) in a Vue.js application hosted on Apache?

mongoose memory leak attributed to jest

Encountering an Issue with Vue 3 and Vue Router 4: Uncaught TypeError - Trying to Access Undefined Properties (specifically 'push')

Issue with Angular9-MatDatePicker: Unable to establish a connection with 'ngModel' as it is not recognized as a valid attribute of 'input'

Accurate TS declaration for combining fields into one mapping

In vue, pagination links are displayed as dots instead of numbers

Tips for enforcing strict typing in TypeScript when implementing abstract functions

Enhancing Vue with Vueify and Babel 7

What are the steps to fix the error stating that 'loginError.data' is an unknown type?

Why is TypeScript giving an error about an undefined object key, even though the key was assigned a value in the previous command?

Retrieve a particular item using the NGXS selector and incorporate it into the template

Setting up Vue.js API endpoints

Error: Unable to locate sportsRecord due to missing function

Can a reducer be molded in ngrx without utilizing the createReducer function?

Implement the administration sw-media-quickinfo functionality within the Shopware 6 platform

What is the recommended TypeScript type for setting React children?

Having difficulty maintaining trailing zeroes in decimals after converting to float in Angular

Encountering a Babel error while attempting to compile my front-end assets using Laravel Mix. The module build process fails, causing