0

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

Improve this question
1
  • Hi @cyberfly - did my solution below work? if so, please mark my answer as correct :) thanks Commented Jan 24, 2019 at 11:10

3 Answers 3

Reset to default
0

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Hi sorry your answer is not really complete. I already found the solution and will paste it here
this answer is correct for Vue.js components and answer your initial question and error message
yes its correct if only VueJS, but when pair with Laravel the steps is abit different. See my answer below. Btw thanks for your help, it really help point me to the right direction,
no this also works with Laravel - I only use Vue.js with Laravel
maybe your answer can be more specific, such as where and how do I register the Vue Component? And where do I put your code? Is it in the blade? That will help me understand your answer better. Because this I what I already tried based on your answer but still have the same error pastebin.com/wVuh2pBa
0

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
Improve this answer

3 Comments

This arrangement is not working for me. Vue complains: "Property or method "message" is not defined on the instance but referenced during render". If I pass the object that is declared as export default in the .vue file, as an object to the Vue.component() call, it works.
Re my last comment: if I do it this way: Vue.component('show-user-component', require('./components/admin/users/ShowUserComponent.vue').default); (i.e. add .default at the end) it works
@DaveNottage please take note Laravel 5.8 and above they update need to put the .default, while my answer based on Laravel 5.7
0

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.