I am currently working on integrating vue.js with Symfony. While this Vue.js configuration worked flawlessly in Laravel, I am facing difficulties with Symfony and unfortunately, I need to use Symfony for this particular project.
My webpack.config.js is set up based on the Symfony documentation.
var Encore = require('@symfony/webpack-encore');
Encore
// defines the directory where compiled assets will be stored
.setOutputPath('web/build/')
// specifies the public path used by the web server to access the assets directory
.setPublicPath('/build')
// will generate web/build/app.js and web/build/app.css
.addEntry('vue', './web/assets/js/vue.js')
.enableVueLoader()
...
;
// export the final webpack configuration
module.exports = Encore.getWebpackConfig();
The vue.js file can be found at web/assets/js/vue.js
import Vue from 'vue'
Vue.component('example-component', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
})
Here's an example component:
<template>
<div>
Hello!
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
In my Twig view (the div with id app is located in base.html.twig):
{% extends 'base.html.twig' %}
{% block content %}
<example-component></example-component>
...
{% endblock %}
{% block jsvendors %}
{% endblock %}
Although the build was successful, I encountered the following error in the console:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <ExampleComponent>
<Root>
I'm unsure of what I might be doing wrong. I want to utilize vue.js by adding a few components to different sections of my pages, similar to how it was implemented in Laravel.
Thank you for any help or insights provided.