Данные Vue файла не отображаются в шаблоне Blade

Question

Данные файла Vue не отображаются в шаблоне блейда.Ошибка появляется в консоли:

Не удалось смонтировать компонент: не определен шаблон или функция рендеринга.

Я создаю файл VUE и пытаюсь отобразить данные VUE в блейдено это не показывает, помогите мне.

это мой основной файл js app.js

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue';
Vue.component('chat-form-component', require('./components/ChatFormComponent.vue').default);
new Vue({
    el: '#app',
    render: h => h(App)
})

Это файл Vue ChatFormCompnent.vue

<template>
<div class="container">
<div class="row justify-content-center">
    <form class="form">
        <textarea
            cols="25"
            rows="5"
            class="form-input">
        </textarea>
        <span class="notice">
            Hit Return to send a message
        </span>
    </form>
    </div>
 </div>
</template>

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

<style>
.form {
    padding: 8px;
}
.form-input {
    width: 100%;
    border: 1px solid #d3e0e9;
    padding: 5px 10px;
    outline: none;
}
.notice {
    color: #aaa
}

</style>

Этошаблон лезвия chat.blade.php

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Chats</div>
                    <div class="card-body">
                        Chats
                    </div>
                </div>
                <chat-form-component></chat-form-component>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">Users</div>
                    <div class="card-body">
                        Users
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Answer 1

В этой строке render: h => h(App) у вас нет импортированного компонента App.Если вы просто следуете за леса Laravel + Vue, он не использует компонент приложения, поэтому вы можете просто удалить эту строку.

Убедитесь, что на вашем блейде layouts.app есть что-то вроде этого:

<div id="app">
    @yield('content')
</div>

Кроме того, запустите команды наблюдения в ответ на ashish.negi.

Answer 2

Вам нужно перекомпилировать свои активы после изменений. Выполните одну из следующих команд

npm run watch
npm run watch-poll

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

Вы можете прочитать документацию по Laravel .