Laravel VueJs component inline template, unknown custom element

Question

I tried to use VueJS inline template component inside Laravel 5.7 but facing this error

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option

This is my sample code on show.blade.php

@extends('layouts.app')

@section('content')

    <div class="content">
        <progress-view inline-template>
            <h1>Test Inline Template Component</h1>
        </progress-view>
    </div>


@endsection

@section('js_after')
    <script>

        Vue.component('progress-view', {
            data() {
                return {};
            },
        });

    </script>
@endsection

Default Laravel VueJS instance on app.js

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

How can I solve this problem? Do I need to register the component inside Laravel app.js? If yes, what is the syntax that I need?

Thanks

Answer 1

When registering a Vue component, you need to include a name, list below:

export default {
        name: 'example-name',
        data() {
            return {
            }
        },

This should help in your situation - let me know :)

Answer 2

I finally found the solution to use VueJS inline template in Laravel.

Using this solution, you can enjoy the best of both world, you can use familiar Laravel blade syntax while keep your application reactive using VueJS.

This technique also covered in Laracast episode https://laracasts.com/series/lets-build-a-forum-with-laravel/episodes/32

Here is the complete step by step

Step 1: Create a Single File Component. Example ShowUserComponent.vue

<script>

        export default {
            mounted() {
                console.log('inline template component');
            },
            data () {
                return {
                    message: 'This is test message'
                }
            },
            methods: {
                store() {
                    alert('Test inline component method')
                }
            }
        }
    </script>

Step 2: Reference the file in Laravel app.js and run 'npm run dev' command in terminal

Vue.component('show-user-component', require('./components/admin/users/ShowUserComponent.vue'));

Step 3: Now you can use the component inside Laravel Blade file

@extends('layouts.app')

    @section('content')

        <div class="content">
            <show-user-component inline-template>
                        <div>
                            <h1>@lang('users.edit')</h1>
                            <input type="text" v-model="message">
                            <button @click="store" >Click</button>
                        </div>
                    </show-user-component>
        </div>

    @endsection