CODEWITHSUNDEEP
laravelvue-component
cyberfly
cyberfly

Reputation: 5868

Laravel VueJs component inline template, unknown custom element

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

Upvotes: 0

Views: 4011

Answers (3)

luisfer
luisfer

Reputation: 2120

I was having the same error as you. In fact I came to your question looking for an answer 🤦🏻‍♂️. Here's what finally worked for me. I'm doing a "subscribe-button" component in Vue, inline.

So I have subscription-button.js (I think there's no problem if you rename it to .vue):

Vue.component('subscribe-button', {
  // logic
})

Then I added this line to app.js just below the require of vue:

window.Vue = require('vue');
require('./components/subscribe-button.js')

In the blade file, I can use now:

<subscribe-button inline-template>
    {{-- blade code here --}}
</subscribe-button>

Upvotes: 0

cyberfly
cyberfly

Reputation: 5868

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

Upvotes: 0

CodeBoyCode
CodeBoyCode

Reputation: 2267

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 :)

Upvotes: 0

Related Questions