Importing Vue components in TypeScript file

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'

Check out vue-class-component. Basically, you must add appendTsSuffixTo: [/\.vue$/] to ts-loader's options and esModule: true to vue-loader's options.

// webpack.config.js{ modules: { rules: [  {    test: /\.ts$/,    exclude: /node_modules|vue\/src/,    loader: "ts-loader",    options: { appendTsSuffixTo: [/\.vue$/] }  },  {    test: /\.vue$/,    loader: 'vue-loader',    options: {      esModule: true    }  }]}}

I may have missed something else.

When using the vue-cli, adapt vue-loader-conf.js as follows:

var utils = require('./utils')var config = require('../config')var isProduction = process.env.NODE_ENV === 'production'module.exports = {  loaders: utils.cssLoaders({    sourceMap: isProduction      ? config.build.productionSourceMap      : config.dev.cssSourceMap,    extract: isProduction, esModule: true  }), esModule: true}