Failed to mount component on Vue-cli 2 using TypeScript

Question

I have used Webpack, Babel, Vue, and TypeScript to test a new project. Everything was good when testing Webpack+Babel and Webpack+Babel+Vue for writing some Web apps with Vue files.

However, when translating the same code to TypeScript (Webpack+Vue+TypeScript), something was wrong. Coding with Vue and TypeScript on .html and .ts files was fine, but only got wrong on loading .vue files.

The picture shows the error on browser. And it did show the vue data on console with "Hello Vue TypeScript"

Did I miss some setting of webpack, tsconfig, or something wrong? Please give me some hints to solve it.

.html

  <div id="app">
      <h1> Hello World TS</h1>
      <h3>{{message}}</h3>
      <hello></hello>
  </div>

.ts

import Vue from 'vue'
import Hello from './components/HelloTs.vue'

let app = new Vue({
  el: '#app',
  data: {
      message: "Hello Vue TypeScript"
  },
  components:{ 'hello': Hello }
})
console.log("vue $data: "+app.message)

.vue

<template>
  <div class="message">
    Hi Vue
  </div>
</template>

<script lang="ts">

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class HelloComponent extends Vue {

}

</script>

<style scoped>
  .message {
    color: blue;
  }
</style>

tsconfig.json

{
    "compilerOptions": {

        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es2015",
        "target": "es5",
        "allowJs": true,
        "removeComments": true,
        "sourceMap": true,
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node",
        "typeRoots": [
            "./types",
            "./node_modules/vue/types"
        ],
        "pretty": true
    }

}

webpack.config.js

module: {
   rules: [
    // TypeScript
      {
        test: /\.tsx?$/,
         use: 'ts-loader',
         exclude: /node_modules/
       },
            // this will apply to both plain `.css` files
       // AND `<style>` blocks in `.vue` files
       {
         test: /\.css$/,
         use: [           
              'css-loader',
              'style-loader'
         ]
       },
       // this will apply to both plain `.vue` files
       {
         test: /\.vue$/,
         use: [
                'vue-loader',
                'vue-style-loader',
                'vue-template-compiler'
         ]
       }
    ]
},

plugins: [
        // make sure to include the plugin for vue-loader 15.*
        new VueLoaderPlugin(),
        new CheckerPlugin()
],

// how modules are resolved.
resolve: {
        extensions: [ '.ts', '.tsx','.vue' ],
        alias:{
            vue$: "vue/dist/vue.esm.js"
        }
}

Murtaza Bharmal Murtaza Bharmal · Accepted Answer · 2019-06-15T12:41:22

There are two ways to solve this error:

Method to import Vue component in .ts is as below,

components:{ 'hello' : HelloTs }

OR

You can give a name to the component to while exporting it as below,

export default class HelloComponent extends Vue {
   name : 'hello'
}

Failed to mount component on Vue-cli 2 using TypeScript

1 Answers