Encountering issues with upgrading Vue.js 2.5.2 with TypeScript

I am currently in the process of updating vue js to version 2.5.2 along with typescript 2.5.3.

Below is my index.ts file:

import Vue from 'vue'

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

This is my tsconfig.json configuration:

{
  "compilerOptions": {
    "outDir": "./wwwroot/build/",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "types": [
      "vue-typescript-import-dts"
    ],
    "experimentalDecorators": true
  },
  "include": [
    "Features/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

However, I encountered the following error message:

ERROR in C:\dev\proj\src\Proj.Web\node_modules\vue-typescript-import-dts\index.d.ts (3,36): error TS2304: Cannot find name 'Vue'.

My setup was functioning properly with vue js 2.4.

I made a change by removing the "allowSyntheticDefaultImports": true, based on this article

Previously, we already recommend using ES-style imports (import Vue from ‘vue’) everywhere with “allowSyntheticDefaultImports”: true in tsconfig.json. The new typings will officially move to ES-style import/export syntax, so that config is no longer necessary, and users are required to use ES-style imports in all cases.

If anyone could point out what I might be overlooking, I would greatly appreciate it.

typescriptvue.jsvuejs2

Answer №1

I decided to create a brand new directory in my VSCode workspace and I made some interesting observations.

Upon exploring the Vue package on NPM, I realized that it already includes type information. This means you do not have to go searching for extra types for Vue (i.e. you should not download @types/vue from NPM).

"dependencies": {
    "vue": "^2.5.2"
}

Surprisingly, even without including this section:

"types": [
  "vue-typescript-import-dts"
],

I was able to successfully compile everything using your provided code sample.

Here are all the juicy details...

package.json

{
    "name": "sample-vue",
    "private": true,
    "dependencies": {
        "vue": "^2.5.2"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./wwwroot/build/",
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "lib": [
            "dom",
            "es5",
            "es2015.promise"
        ],
        "experimentalDecorators": true
    },
    "include": [
        "*.ts"
    ],
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}

app.ts

import Vue from 'vue'

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

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

When a fresh tile is loaded in Mapbox, an event is triggered

As I work with the Mapbox GL JS API to manipulate maps, I find myself wondering if there is an event that can inform me whenever a new tile HTTP request is made. My code snippet looks like this: map.on("dataloading", e => { if(e.dataType ...

javascriptvue.jsmapboxmapbox-gl-js

What could be causing my router link tag to malfunction within the bootstrap framework?

In my project, I am using vue.js in combination with bootstrap to develop a navigation task bar for the frontend. To set up the routing functionality, I have created a separate file called router.js. router.js import Vue from 'vue' import Router ...

vue.jsvuejs2vue-router

Refreshing bootstrap modal after closing it

In my Vue application, I have implemented a Bootstrap modal which contains input fields. After entering data, submitting it, and reopening the modal, I noticed that the previous inputs are still present. However, I would like to reset all input fields once ...

vue.jsbootstrap-modalbootstrap-5

Is there a missing .fillGeometry in the Figma plugin VectorNode?

The documentation for VectorNode mentions a property called fillGeometry. Contrary to this, TypeScript indicates that "property 'fillGeometry' does not exist on type 'VectorNode'". https://i.sstatic.net/ICfdw.png I seem to be missing ...

typescriptfigmafigma-api

Proper method of defining an action in Vuex

Do you think it's sufficient to create vuex-actions as simple as a1, without chaining then/catch calls? Or should I always go with creating Promises as in a2 (and also adding a reject branch)? Appreciate your insights... import Vue from 'vue& ...

javascriptvue.jsvuex

Can you identify the nature of the argument(s) used in a styled-component?

Utilizing typescript and react in this scenario. Fetching my variable const style = 'display: inline-block;' Constructing a simple component export const GitHubIcon = () => <i className="fa-brands fa-github"></i> Enh ...

javascriptreactjstypescripttypescript-typings

What is the best way to filter out duplicate objects in JavaScript?

I have the following code snippet: let self = this; self.rows = []; self.data.payload.forEach(function (item, index) { if (!(self.rows.includes(item))) { self.rows.push(item); } }); The issue is that includes always returns false. Each ite ...

javascriptvue.js

Reusing a lazy-loaded module across multiple applications

Currently, I am working on an enterprise Angular 2 application with numerous lazy loaded modules. A new project came up where I needed to reuse a module that was previously created for the main app. After researching online, the only solution I found was ...

angulartypescriptlazy-loadingangular-module

Creating an instance of a child class using a parent class variable

I am facing an issue with passing a variable from my parent component to the child component. Despite trying multiple solutions, I have not been able to make it work. Here is the code I have: Parent : <template> <Widget/> </template&g ...

vue.js

Vue's mounted method seems to be holding back on providing the $route.name

After spending a full day diving into Vue and familiarizing myself with all the hooks and routes, I still can't seem to get the desired result. I've tried using the regular hooks like created and mounted, but it continues to return null. Here is ...

vue.jsvue-router

What are the advantages of combining the website URL and API URL within the Angular service?

When deploying my application in a production environment, I encounter an issue with the URL addresses. The web address is , while the API address is . However, when making a request to the API through Angular, the URLs get concatenated into . This issue d ...

angulartypescriptangular7angular8

Laravel Vuejs Error: Unexpected token '<' received in syntax

As a newcomer to Vue.js, I am currently working on a Laravel-Vue.js project. When I try to execute npm run dev, an error is triggered: Uncaught SyntaxError: expected expression, got '<'. The application is being accessed through The issue see ...

laravelvue.js

What is a way to transfer an Object from one Vue.js component to another without relying on vuex?

Using vue-router in app.vue, I defined the two components as shown below: <div class='app'> <div class='nav'> <router-link to='/a'>to A component</router-link> <router-link to= ...

javascriptvue.jsvue-componentvue-router

The method of evaluating in-line is distinct from evaluating outside of the

What causes the compiler to produce different results for these two mapped types? type NonNullableObj1<O> = {[Key in keyof O] : O[Key] extends null ? never : O[Key]} type NotNull<T> = T extends null ? never : T; type NonNullableObj2<T> = ...

typescriptmapped-types

What is the best way to pinpoint and eliminate a Subject from an Observable?

Currently, I am utilizing a service to gather user responses from a questionnaire. The sequence of events is outlined below: questionnaire.component.ts : serves as the main container that receives data from question.service.ts question-shell.component.ts ...

angulartypescriptrxjs

Displaying a Facebook iframe on the left side of the page

I'm struggling with positioning the Facebook iframe embed to sit on the left of the text. I want it to be aligned with the left margin, but also have the text flow beside it from the same height. Can anyone offer some guidance on how to achieve this u ...

cssvue.jsiframe

ElementUI datetime picker gets refreshed when popper is closed

I've been utilizing ElementUI in combination with Vue.js. My goal is to utilize the el-date-picker and only capture the input update once the picker's popper closes, excluding any earlier updates triggered by selecting a date using the mouse cli ...

vue.jsdatepickervuejs2element-ui

Establishing the Default Dropdown Value in ABP Framework Using Angular UI Dynamic Forms

Currently, I am utilizing the ABP framework along with Angular UI to work on dynamic forms. One specific aspect of my work involves implementing a dropdown as shown below: const timeZoneProp = new FormProp<IdentityUserDto>({ type: ePropType.Enum, ...

angulartypescriptabp-frameworkangular15

Issue with custom HTML5 video progress bar not syncing with video playback

Currently, I am working on a project using React with Typescript. I have implemented an HTML5 element range for a seek bar in the video player. The issue I am facing is that although the seek bar works correctly when manually dragged, it does not update as ...

reactjstypescripthtml5-video

Display fresh information that has been fetched via an HTTP request in Angular

Recently, I encountered an issue where data from a nested array in a data response was not displaying properly in my component's view. Despite successfully pushing the data into the object programmatically and confirming that the for loop added the it ...

arraysangulartypescripthttpangular-lifecycle-hooks