BonBonSlick
@BonBonSlick
Vanilla Web Architect

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

Сделано все по докам, как обычно.
https://symfony.com/doc/current/frontend/encore/vu...

app.js
window.$ = window.jQuery = require('jquery');
window.Vue = require('vue/dist/vue');

$(document).ready(function () {
      if ($('#vrapper').length > 0) {
          Vue.component('example', require('./components/Example.vue'));

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


twig
<div id="vrapper">
    <example></example>
</div>

{% block javascripts %}
    <script src="{{ asset('js/app.js') }}"></script>
{% endblock %}


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

found in

---> <Example>
       <Root>


Тестовый компонент, при попытке рендеринга выдает ошибку.

console.log(Vue.component('example', require('./components/Example.vue')));
// result 
ƒ VueComponent(options) {
      this._init(options);
    }


UPD. я немного покопался в древних проектах на git hub, вот нашел решение корявое.

app.js
import Hello from './components/Example.vue'
Vue.component('example', require('./components/Example.vue')); // выдает ошибку

$(document).ready(function () {
        if ($('#vrapper').length > 0) {
                  Vue.component('example', Hello);

                const app = new Vue({


Вот так работает, НО:
1 - ето криво, у меня более 60 компонентов, и мне надо грузить все одним файлом
2 - это грязно
3 - неудобно
4 - в Laravel работал метод require() отлично. Почему - то в Symfony Encore что то его ломает - _ -
require('./load-components'); // тут подключал все компоненты

5 - согласно докам, так как я делал ранее через require() можно делать, однако...
https://forum-archive.vuejs.org/topic/331/vue-comp...

Example.vue
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
<script>
    module.exports = {
        props: {

        },

        ready: function () {

        },
        mounted() {
            console.log('Component mounted.')
        },
        computed: {

        }
    }
</script>


Пробовал оба варианта, а так же
console.log(require('./components/Example.vue'));
В обеих случаях вернет мой компонент, почему Vue.component перестал воспринимать require???
  • Вопрос задан
  • 13336 просмотров
Решения вопроса 1
BonBonSlick
@BonBonSlick Автор вопроса
Vanilla Web Architect
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
01 дек. 2020, в 23:18
80000 руб./за проект
01 дек. 2020, в 22:41
60000 руб./за проект
01 дек. 2020, в 21:24
500 руб./за проект