(Vue with Typescript) Failed to mount component: template or render function not defined

Question

Failed to mount component: template or render function not defined.

Hi Guys I'm Trying to Use Typescript inside my project Laravel / Vue but I hade some Issues like this Error Message (Failed to mount component: template or render function not defined.)

Please some help and thank you for all

app.js

    require('./bootstrap');
    window.Vue = require('vue');

    import Example from './components/Example.vue';

    const app = new Vue({
        el: '#app',
        components: {
          Example
        }
    });

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015", "es2017"],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "strict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true
  },
  "paths": {
    "@/*": [
      "resources/js/*"
    ]
  },
  "include": [
    "resources/js/**/*.ts",
    "resources/js/**/*.vue"
  ],
  "files": [
    "resources/js/references.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
      module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                      appendTsSuffixTo: [ /\.vue$/ ]
                    }
                }],
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    esModule: true
                }
            }
        ],
      },
      resolve: {
          extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
      },
  });

Example.vue

<template>
    <div></div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    name: 'Example' as string,
    data() {
      return {}
    },
    mounted(): void {
        console.log('Component mounted.')
    }
})
</script>

Jason Jason · Accepted Answer · 2020-03-01T18:27:59

You don't need Vue.extend after export default, simply export the object

<script lang="ts">
export default {
    name: 'Example',
    data() {
      return {}
    },
    mounted(): void {
        console.log('Component mounted.')
    }
}
</script>

(Vue with Typescript) Failed to mount component: template or render function not defined

1 Answers