Laravel 5.3 - Vue 2 мерцает на странице перезагрузки

Question

Каждый раз, когда я загружаю свою страницу, вместо отображения моего содержимого Vue, он показывает, а затем быстро исчезает (мерцает).

Мои app.js файл:

require('./bootstrap'); 

var Vue = require('vue'); 

new Vue({ 
el: '#root', 
data: { 
    message: 'Hello world!' 
} 
}); 

Мой взгляд:

<div id="root"> 
    <input type="text" v-model="message"> 
    <p>The value of the input is: @{{ message }}</p> 
</div> 

Vue ошибка консоли:

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

Что может быть проблема?

Answer 1

Похоже, вы используете сборку runtime-only, поэтому вам необходимо предоставить функцию рендеринга или потянуть в standalone build. Я предполагаю, что вы просто забираете все и запускаете, поэтому вам нужно будет решить, как вы собираетесь проектировать свое приложение.

Если вы хотите использовать blade шаблонов, то вы будете нуждаться в standalone build, так что вам просто нужно добавить псевдоним для вашего webpack config, чтобы вытащить его (см: https://github.com/JeffreyWay/laravel-elixir-webpack-official):

resolve: { 
    alias: { 
    'vue$': 'vue/dist/vue.common.js' 
    } 
} 

Или, если вы с помощью browserify вам нужно добавить следующее package.json:

"browser": { 
    "vue": "vue/dist/vue.common" 
} 

Laravel 5.4 теперь делает это из коробки (с Laravel mix), но похоже, что у вашей версии 5.3 нет.

Если вы хотите использовать .vue файлы и создавать и SPA, то вы можете использовать runtime-only сборки и создать App.vue файл макета и установить, что вместо того, чтобы:

var Vue = require('vue'); 
var App = require('./components/App.vue'); 

const app = new Vue({ 
    render: h => h(App) 
}).$mount('#app'); 

Вы можете проверить этот ответ на более если вы хотите спуститься по этому маршруту: Updating elements outside of a component