Symfony Vue.js Encore Failed to mount component: template or render function not defined

Question

I'm trying set up vue.js with symfony. (This Vue.js config working correctly in laravel, but symfony not and I have to use symfony for this project :( )

webpack.config.js configured from symfony documentation

var Encore = require('@symfony/webpack-encore');

Encore
    // the project directory where all compiled assets will be stored
    .setOutputPath('web/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    // will create web/build/app.js and web/build/app.css
    .addEntry('vue', './web/assets/js/vue.js')

    .enableVueLoader()
    ...
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

vue.js in web/assets/js/vue.js

import Vue from 'vue'

Vue.component('example-component', require('./components/Example.vue'));

const app = new Vue({
  el: '#app'
})

example component:

<template>
    <div>
        Hello!
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Twig view: (div with id app is in base.html.twig)

{% extends 'base.html.twig' %}
{% block content %}

    <example-component></example-component>

    ...
{% endblock %}
{% block jsvendors %}
{% endblock %}

Build compiled successfully, but in console still getting this error:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <ExampleComponent>
       <Root>

What am I doing wrong? I don't want use vue as simple page application like in vue-loader example, I need add only few components in different page sections, just like in laravel.

Thank you all.

Answer 1

try to add default to require:

Vue.component('example-component', require('./components/Example.vue').default);