Writing TypeScript, Vue, and playing around with experimental decorators

After creating a Vue project through Vue-CLI v3.0.0-beta.15, the project runs smoothly when using npm run serve. However, TypeScript displays an error message stating that support for decorators is experimental and subject to change in a future release, but strangely, this error only appears inside the editor.

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

Attempts to fix the issue:

  1. Ensured that experimentalDecorators is set to true in my tsconfig.json file, as Vue does by default.

  2. Created a jsconfig.json file with the following options:

    {
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

  3. Attempted to change settings in VSCode using 

    "javascript.implicitProjectConfig.experimentalDecorators": true

Using the Vetur extension with VSCode led to posting an issue on their repository, yet the same error persists even without extensions in Visual Studio, indicating a possible issue recognizing the tsconfig.json file.

The steps taken to generate the project were:

  1. mkdir experiment && cd $_
  2. npm init
  3. npm install -D @vue/cli
  4. ./node_modules/.bin/vue create dashboard

  5. Selected the following options:

    • Required features: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
    • Use class-style component syntax? Yes
    • Auto-detected polyfills with Babel and TypeScript? Yes
    • CSS pre-processor choice: SCSS/SASS
    • Linter config choice: TSLint
    • Additional lint features: Lint on save
    • Unit testing solution: Mocha
    • E2E testing solution: Cypress
    • Configuration preference for Babel, PostCSS, ESLint, etc.: Dedicated config files
    • Save as a preset for future projects? No

  6. Navigated to dashboard/src/views/Home.vue

Appearances of the project in Visual Studio:

https://i.stack.imgur.com/SYH3B.png

Differences are noted in the appearance in VSCode:

https://i.stack.imgur.com/5ejTt.png

typescriptvue.jsvisual-studio-codevetur

Answer №1

Did you take a look at this specific post?

Perhaps it would be beneficial to try the following steps: Navigate to File => Preferences => Settings (or use Control+comma) to open the User Settings file. Then add "javascript.implicitProjectConfig.experimentalDecorators": true

UPDATE:

Regarding your initial example, it seems that your project is within the experiment directory, but the tsconfig.json file is in a subdirectory rather than the root directory. To resolve this issue, consider opening vscode with the dashboard as the root folder of your project and restarting the editor.

Answer №2

After discovering that I needed to create a jsconfig.json file at the root of the folder where the tsconfig.json file is located, the error in Visual Studio disappeared. However, despite setting various options, the error still persisted in VSCode. It appears that this issue may be related to a Veturbug, rather than a problem with VSCode, TypeScript, or configuration settings.

To resolve the issue in VSCode, I found that opening the Dashboard folder instead of the Src folder (which is the actual project root) seemed to "fix" the problem. This suggests that Vetur may not properly detect the tsconfig.json file when it's nested within other directories.

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

Why isn't the page showing up on my nextjs site?

I've encountered an issue while developing a web app using nextjs. The sign_up component in the pages directory is not rendering and shows up as a blank page. After investigating with Chrome extension, I found this warning message: Unhandled Runtime ...

javascriptreactjstypescriptnext.jsroutes

Deploying Firebase functions results in an error

Just recently started exploring Firebase functions. Managed to install it on my computer, but running into an error when trying to execute: === Deploying to 'app'... i deploying firestore, functions Running command: npm --prefix "$RESOURCE_ ...

typescriptfirebasenpmgoogle-cloud-functions

Utilizing the [mat-dialog-close] directive within an Angular dialog component

While attempting to utilize the suggested code in the dialog template for opening a dialog component to either confirm or cancel an action, I encountered an error with the following message. Why did this happen? Property mat-dialog-close is not provided by ...

angulartypescriptangular-material

Design buttons that are generated dynamically to match the style

I have a challenge in styling dynamically generated buttons. I've developed a component responsible for generating these dynamic buttons. const TIMER_PRESETS: Record<string, number> = { FIFTHTEENSEC: 15, THIRTYSEC: 30, FORTYFIVESEC: 45, ...

cssreactjstypescriptmaterial-uiclient-side

Different ways to update the AutoComplete Style attribute

MuiInput-formControl { margin-top: 16px; Is there a way to reset the marginTop property to zero? I attempted the following method, but it was not successful. MuiFormControlLabel: { marginTop: 0, }, <Autocomplete disabl ...

csstypescriptmaterial-uiautocompletestyles

Is there a way to eliminate the line that appears during TypeScript compilation of a RequireJS module which reads: Object.defineProperty(exports, "__esModule", { value: true });?

Here is the structure of my tsconfig.json file: { "compileOnSave": true, "compilerOptions": { "module": "amd", "noImplicitAny": false, "removeComments": false, "preserveConstEnums": true, "strictNullChecks": ...

javascripttypescriptrequirejsamdtsc

Adjust the alignment of an expansion panel header to the right using Vuetify

Incorporating the Vuetify expansion panel, I am aiming to align a specific portion of the content within the <div slote="head"></div> to the right, resulting in this desired layout: https://i.sstatic.net/tbOL8.jpg https://i.sstatic.net/22NTS. ...

javascriptcssvue.jsvuetify.js

What causes a component to not update when it is connected to an Array using v-model?

Array1 https://i.stack.imgur.com/cY0XR.jpg Array are both connected to the same Array variable using v-model. However, when changes are made to Array1, Array2 does not update. Why is this happening? Process: Upon examining the logs, it can be observed th ...

javascriptvuejs2vue-componentvue.js

Implementing mouse event listeners on dynamically created elements in Vue.js

I've been curious if anyone has attempted something similar to the following code snippet (created within a Vue.js method): for (let i = 0; i < this.items.length; i++) { let bar = document.createElement('div'); bar.className = this ...

javascriptvue.js

Navigating through Vue Router with Dynamic Imports and Guards

I am looking to dynamically bring in data from a component file into a router file, and then allow the use of next() based on the value of the imported data. In my App.vue file, I am using this.$router.push({name: "Dashboard"}) when the data changes from ...

javascriptvue.jsvuejs2vue-componentvue-router

Next.js Enhanced with Google Analytics

I've been experimenting with integrating Google Analytics into Next.js, following a tutorial on YouTube - https://www.youtube.com/watch?v=lMSBNBDjaH8 Following the instructions in the video, I added these two scripts in _document.js: <script async ...

reactjstypescriptnext.jsgoogle-analytics

Can a Vue.js project import the bootstrap.min.js file?

I have been working on a project in Vue.js where Bootstrap is already integrated. The project consists of HTML and CSS which I am converting into a Vue.js application while utilizing Bootstrap classes. However, I have encountered an issue with the dropdown ...

vue.js

Managing timeouts and errors in a Spring and Vue login systemIn this system,

I am currently working on developing a back-end using Spring and a front-end with Vue. Both projects are separate but running on the same machine. I have managed to resolve or disable all cors, csrf, and login issues except for one that has left me complet ...

javaspringvue.js

The typescript MenuProvider for react-native-popup-menu offers a range of IntrinsicAttributes

Looking to implement drop-down options within a Flatlist component, I've utilized the React Native Popup Menu and declared MenuProvider as the entry point in App.tsx. Encountering the following error: Error: Type '{ children: Element[]; }' ...

javascriptreactjstypescriptreact-native

Trigger functions on a universal component from the nested component

I am currently working on an Angular project with two components, one being a generic component where the table is defined and the other being a component that invokes this table by passing the required data. However, I encountered an issue where the tabl ...

angulartypescriptangular-material

Discover the magic of integrating FeathersJS REST functionality within Angular with these simple steps

I've encountered a challenge while trying to make Feathers work in Angular with a Feathers REST server. It seems that no requests are being made. My Feathers server hosts the resource http://example.com/app/experiences which returns data in paginated ...

angulartypescriptrxjsangular2-observablesfeathersjs

Retrieving JSON data from an Axios request in VueJS

I set up a simulated server in Postman to fetch some test data for my Vue application. This is the response I am receiving from the server: I am struggling to access the data information. Here is the code snippet that I am using: <template> <d ...

jsonvue.jsaxios

cycle through options of radio buttons

How can I display items of radio buttons, with the values of these items coming from a backend api? <div class="input-group col-md-9 input-group-sm"> <label>gender</label> </div> <!-- TO CORRECT ...

angulartypescript

How to Add a Rule to an Existing Application Load Balancer Listener using AWS CDK

When I inherited a project, I discovered an application load balancer with a HTTPS Listener that was set up before I began using CDK. This listener currently has 13 rules in place that route requests based on hostname to different fargate instances, with ...

typescriptamazon-web-servicesaws-cdkamazon-elb

View real-time data in Vuejs 3 as it executes

I am currently working on a form that populates a table with data retrieved from a Laravel API. I am using Vue.js 3 and Composition API to build my entire application. When the button is clicked, I want the table to be filled with data from the form. The b ...

javascriptvue.jsvuejs3vue-composition-api