What is the best way to incorporate a Vue single file component into a Typescript-infused view?

Despite trying numerous methods, I consistently encounter build or runtime errors. To my surprise, I have not come across a functional example or post related to this inquiry after extensive research. I initiated a new project with Typescript using the Vue UI and created the subsequent component:

<template>
  <div class="navigation">
    BACK | NEXT buttons go here
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class BackNext extends Vue {
}
</script>

Subsequently, when attempting to utilize this component in a .vue view file, this is the closest approximation achieved:

<template>
  <div class="question">
    <h1>Personal</h1>
    <back-next />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import BackNext from "../../components/BackNext.vue";
@Component
export default class Personal extends Vue {
  components = {
    'back-next': BackNext
  }
}
</script>

However, this process fails with multiple build errors:

 ERROR  Failed to compile with 11 errors4:22:27 PM

These dependencies were not found:

* core-js/modules/es.object.get-prototype-of in ./node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
* core-js/modules/es.object.to-string in ./node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js, ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.reflect.construct in ./node_modules/@babel/runtime/helpers/esm/createSuper.js, ./node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
* core-js/modules/es.regexp.to-string in ./node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
* core-js/modules/es.string.iterator in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.symbol in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.symbol.description in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.symbol.iterator in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/web.dom-collections.iterator in ./node_modules/@babel/runtime/helpers/esm/typeof.js

To install them, you can run: npm install --save core-js/modules/es.object.get-prototype-of core-js/modules/es.object.to-string core-js/modules/es.reflect.construct core-js/modules/es.regexp.to-string core-js/modules/es.string.iterator core-js/modules/es.symbol core-js/modules/es.symbol.description core-js/modules/es.symbol.iterator core-js/modules/web.dom-collections.iterator

The necessity to install various dependencies for standard functionality in a new project with Typescript support seems counterintuitive. I am hesitant to clutter my project with unnecessary installations that may lead to further complications.

npm version 6.13.4

node version 12.16.1

yarn version 1.22.4

vue version @vue/clu 4.5.3

Answer №1

To utilize it in the decorator, ensure you register it

import BackNext from "../../components/BackNext.vue";

@Component({
  components: {
    BackNext,
  },
})

export default class Personal extends Vue {
  private dataItems = [];

...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering the best way to organize and sort information retrieved from the backend within an Angular

How can I restrict a user to only search for data that has been provided from the backend and prevent them from creating new data? In my backend, there are two words: "Chart" and "Map". I am looking for a way to limit the user's search to only these ...

Determine if the user has liked the post using VUEJS

I need to verify whether the user has already liked the post. I have an array containing the users who have liked the post, but I'm unsure how to hide the button if the logged in username is present in the likes array. Here's the relevant code sn ...

Extending Record in Typescript: A Comprehensive Guide

When working on interfaces, I often find myself wanting to extend the type Record in order to define objects with predefined keys and optional values without knowing their names. For instance: interface Person extends Record<string, string>{ phonen ...

What is the best way to utilize Object.keys() for working with nested objects?

When working with nested objects, I am trying to access the properties using Object.keys() and forEach(). However, I am encountering an issue when attempting to access the nested keys filteringState[item][el]. Is there a specific way to write a function f ...

Ways to set a button as default clicked in an Array

I have a collection that stores languages and their boolean values. My goal is to automatically set buttons to be clicked (active) for each language with a true value in the collection. Whenever a different language is selected by clicking on its respect ...

Difficulty encountered while trying to link an abstract class with Redux state using redux-thunk

My approach to using redux-thunk and class components in React follows a basic pattern. The code below shows how a class definition MyClass is exported, correctly connected to state through mapStateToProps, and has access to actions from mapDispatchToProps ...

Removing an item from a parent array within a Vue.js component using Vue.js 2

Having a component with prop List, which is a list of input files. Each time an input is changed, another one is added. However, encountering strange behavior when attempting to delete. Link to JSFiddle removeAnother: function(item) { var vm = this; ...

Connect the keys from one enum to either keys or values in another enum

When working with the code below, it is important that the keys of PropertiesNamesInDataBase align with those in User.Keys. While the values of PropertiesNamesInDataBase are used in the backend, it is crucial for uniformity that the names match in the fron ...

Enhance Your Vue.js 2.0 Experience: Implementing Vue Components Generated with v-html and Compiling the Markup

Currently Utilizing VueJS 2.0 I am looking to transform the following into a clickable link. Is this possible? This is my vue component: <template> <div v-html="markup"></div> </template> <script> new Vue({ data() { ...

Unable to access the "target" property while transferring a value from child to parent component

Within my project, the student component is considered a child component of the main app component. Inside the template of the student component, there is an input element defined like so: <input type='text' #inputbox (keyup)='onkeyUp(i ...

Tips for altering the color of string outputs

Can you help me modify a function to display different colors based on the output? For instance, I want it to show in orange if the result is too low, and in red if it indicates obesity. bmiCalculation() { var weight = parseInt(this.currentWeight); ...

the input parameter is not being passed to the component

I need assistance with creating an inline input edit component. The component is loading correctly, but it seems like the @Input() variables are always returning undefined. index.html ... <app-inlineinput [name]="username" [fi ...

Tips for sequentially arranging and rearranging an array of numbers, even when duplicates are present

Encountered a perplexing issue that has me scratching my head in an attempt to visualize a solution. Currently, I am working with an array of objects that appears as follows: let approvers = [{order:1, dueDate: someDate},{order:2, dueDate: someDate}, ...

Insert the picture into an HTML document and retrieve the image file location

I successfully used <input type="file" accept="image/*"> to upload an image and then applied base64 encoding of the image in the onload callback function of a FileReader instance. However, I encountered a problem when trying to assign this base64 enc ...

Click on the div in Ionic 2 to send a variable

<div class="copkutusu" (click)="kanalsil(kanalid,deneme)" #kanalid id={{ver.channelid}} #deneme id={{ver.channelapikey}}></div> I am requesting kanalid.id and deneme.id in my .ts file. Even though they are the same variable names, they repres ...

Is there a shortcut for creating interfaces that have identical sub properties?

We are seeking to streamline the interface creation process by utilizing shorthand for properties labeled from Monday through Sunday, each with identical sub-properties. interface Day { start: number end: number } interface Schedule { Monday: Day ...

Inquiries regarding vue-router and the addition of routes

Main javascript file: import Vue from 'vue' import App from './App.vue' import router, { initLayout } from './router' import store from './store' require('../mock/index') Vue.config.productionTip = false ...

Yarn installation halted due to an unexpected end of file

Encountering an issue with npm/yarn. Our private npm registry is hosted on a VM using Verdaccio to manage our packages. Whenever we install external packages for the first time, they are redirected to registry.npmjs.org through http://localhost:4873 and th ...

How to Generate a JPG File from a Leaflet Map in Angular 4 using Typescript

I am developing a custom application using Angular4 that involves integrating leaflet maps. One of the requirements is to export the current view of a map as a JPG image, capturing only the map with markers and polylines - similar to taking a screenshot. ...

Exploring the world of Typescript and Angular Filter functionalities

I am looking to utilize one of my Angular Filters in my controller as a function. I came across a solution on this page: How to use a filter in a controler The last answer provided exactly what I needed, so I implemented it in my JS code: var MyFunc ...