javascript - Importing Vue components in TypeScript file

Question

I have been trying to use Vue.js with TypeScript and I came across this repo.

I faced issues here that I am getting error while importing Vue Single Component File from TypeScript. I am using Visual Studio Code. Please see error below.

main.ts:

// The Vue build version to load with the 'import' command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import * as Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
})

VS Code error:

1 ERROR 
? main.ts
[ts] Cannot find module './App'. (4 17) 

Answer 1

From Alex Jover:

If your editor is yelling at the line import App from './App' in main.js file about not finding the App module, you can add a vue-shim.d.ts file to your project with the following content:

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

and write :

import App from './App.vue'

instead of

import App from './App'