Unable to install vue-property-decorator

When attempting to set up Vue and TypeScript with class style using vue-property-decorator, I encountered a strange script after creating the project.

I was anticipating a script like this:

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

@Component({
  components: {},
})
export default class App extends Vue {


}
</script>

However, instead of the expected script above, I am seeing the following:

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  
})
</script>

Answer №1

Make sure to install vue-class-component first before using vue-property-decorator, as it is a required peer dependency.

For more details, you can check out https://github.com/kaorun343/vue-property-decorator:

Note that vue-property-decorator relies on vue-class-component. Make sure to read the README of vue-class-component before proceeding with this library.

If you need documentation on vue-class-component, visit:


If you are facing issues after initializing your project, it could be related to incorrect initialization settings (e.g., quasar setting up script setup/ts instead of

script options/js</code).</p>
</div></answer1>
<exanswer1><div class="answer" i="74494612" l="4.0" c="1668789872" v="1" a="RGltYXZh" ai="5734961">
<p>Prioritize installing <code>vue-class-component
first before proceeding with vue-property-decorator, since it's an essential peer dependency and not included in the latter.

Visit https://github.com/kaorun343/vue-property-decorator for further guidance:

This library heavily relies on vue-class-component, therefore, acquaint yourself with its README prior to adopting this library.

Explore vue-class-component documentation here:


If you encounter post-initialization issues, it might be attributed to incorrect settings during initialization (e.g., quasar misconfiguring script setup/ts instead of script options/js) or possibly missing ClassComponent selection when prompted by CLI.

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

Using VueJS to showcase user input in a dynamic list and a pop-up modal

I am attempting to achieve the following: Use a v-for loop to display form input (name, position, company) as an unordered list, showing only the name input and a button for each person When a button is clicked, a modal will appear displaying all the data ...

What is the best way to delay a method in vue.js?

In the tab element called competences, there is an input field with the reference search. <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a @click="competencesTabClick" aria-controls="Company" aria-sel ...

Show the outcome of a function inside an ng-repeat loop

I have encountered a roadblock in my Angular project. I am populating a table with run data retrieved from a REST call using ng-repeat. Each run includes GPS coordinates, and I have a function that converts these coordinates into the corresponding city nam ...

Navigating through a website that loads content dynamically with AJAX can be easily done by

Having an issue with scraping data from a website using jQuery AJAX. There are 300 links to scrape, but the site only shows 50 at a time, requiring scrolling to load more. Can someone assist me with this? var baseURL = "https://hr.myu.umn.edu/psc/hrp ...

What steps can be taken to convert this function into a more concise, dry function?

I'm attempting to customize a typewriter effect on my webpage, and while it successfully displays predefined data, I am struggling with converting it into a function that can receive values and then display those values. I have made attempts to modif ...

"The Vue.js/JavaScript object updates, but the changes are not being displayed in the document object model (DOM

Currently, I am endeavoring to iterate through an array of objects and display them as list items. There is a click listener that introduces a custom property to the object, and a class binding depends on the value of that property. Would you mind reviewin ...

Challenges when upgrading from Ext JS 3 to Ext JS 4

I am looking to upgrade my code from Ext JS 3 to Ext JS 4. I used the Ext.Updater class in Ext JS 3, but I cannot seem to locate a similar functionality in Ext JS 4. Can anyone provide assistance with this transition? ...

What is the best way to showcase the information of each object on a click event in Vue.js?

My goal with this code is to display each day's class schedule when it is clicked on. However, the issue I'm facing is that the entire week's schedule is being displayed instead of just the selected day. What adjustments should I make in ord ...

Ways to collect email address or name from an email message

Suppose I send an email to someone with a link at the bottom. The text of the link might be something like click me. When the user clicks on this link, they will be directed to a webpage. On this webpage, a message saying "Thank you" will be displayed a ...

Searching with Vue JS and Firebase using multiple .Where() functions can be achieved by chaining these methods together. This

Looking to search multiple collections, not just brand. I am querying directly from Cloud Firestore Successfully pulled data for brand Trying to incorporate category and description as well, but facing issues Using where() to query Firebase getExchanges ...

Exploring ElectronJs: The journey to sending messages from ipcMain to IpcRender and awaiting a response

I need help with sending a message to ask the renderer to parse an HTML string mainWindow.webContents.send('parse html', { resp}) The renderer processes the data and sends a reply ipc.on('parse html',function(e,p){ let b ...

Exporting a module from a TypeScript definition file allows for seamless sharing

I am in the process of developing a definition file for the Vogels library, which serves as a wrapper for the AWS SDK and includes a property that exports the entire AWS SDK. declare module "vogels" { import AWS = require('aws-sdk'); export ...

Extract the names and corresponding keys from an array, then display them as a list

I am currently working on extracting key names and sub key names from a file in order to display the results in a list format as shown below. Anna was removed by AdminWhoRemoved due to Removal Reason Ethan was removed by AdminWhoRemoved due to Removal Re ...

Making an AJAX request in Javascript to retrieve multiple values using the HTTP method 'GET' from a URL

xmlhttp.open("POST","BAConsultRecordsAJAX.php?q="+str,true); Could this be achieved? xmlhttp.open("GET","BAConsultRecordsAJAX.php?q="+str+"j="+str2,true); I need to have values stored in both q and j fields. ...

Is all of the app fetched by Next.js when the initial request is sent?

After doing some research online, I learned that Next.js utilizes client-side routing. This means that when you make the first request, all pages are fetched from the server. Subsequent requests will render those pages in the browser without needing to com ...

Guide to creating AngularJS directive attributes without a right-hand side in hiccup code?

I'm currently developing an AngularJS application using markup in hiccup format. Here is a snippet of the markup: <div modal-show modal-visible="showDialog" .........></div> Below is the corresponding Hiccup I have created: [:div.modal. ...

Execute a script upon page load

Is there a way to trigger a script tag <script> immediately upon the website loading? I've experimented with various codes, but haven't found one that meets my needs. ...

Tips for conducting unit tests on Vue.js components utilizing nuxt-i18n

When attempting to execute the code below using yarn run jest, an error is thrown: TypeError: _vm.$t is not a function. This occurs because the component SearchField relies on a translation ("$t('search')"). import { mount } from "@vue/test-util ...

What is the minimum number of lines that can be used for javascript code?

Currently, I am in the process of developing a custom JavaScript minifier. One question that has come up is whether it is necessary to insert line breaks after a certain number of characters on a single line, or if it even makes a difference at all? For i ...

The unexpected blank space appearing beneath my website as a result of images and videos placed on the

There seems to be some random white space on my website between the main body elements and the footer. Interestingly, removing the cat image and videoplayer eliminates this white space. However, I don't want to remove them completely, so I'm tryi ...