"Property or method 'xxxx' is not defined." On

Question

I making a multi-page vue app. (trying to not use the SPA approach) I'm taking the suggested "Option 2" from this Vuejs js for multiple pages, not for a single page application

In my main layout.blade.php template I have this.

<div id="app">
    @if (isset($component))
        <component v-bind:is={{ $component }} inline-template>
            <div>
    @endif

        @yield('content')

    @if (isset($component))
            </div>
        </component>
    @endif
</div>

Then for a page that is going to use a vue instance I have this ie. meals-create.blade.php

@extends('layout.app', ['component' => 'mealcreate']) // This sets the component name for layout.blade.php

@section('content')

   // Page Content Here...

@endsection

I have a component saved in resources/js/page-components/MealCreate.vue that will have all the vue logic for that page. That looks like this

<script>
    export default {

        data() {
            return {
              // Some data ....
            };
        },
        created() {
           // ....
        },

        methods: {
            // ......
        }
    };
</script>

In my resources/js/app.js I'm loading the component and the vue instance like this

// Page Components
Vue.component('mealcreate', require('./page-components/MealCreate.vue').default);

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

However now when I load the page I get this error:

Property or method "mealcreate" is not defined on the instance but referenced during render.

The property/method in this error changes to what ever I set @extends('layouts.app', ['component' => 'mealcreate']) in meal-create.blade.php

Am I missing something? Why would this be happening when its just a name of a component?

Thanks for any help!

Answer 1

You need to add mealcreate to the components section

Vue.component('mealcreate', require('./page-components/MealCreate.vue').default);

const app = new Vue({
    el: "#app",
    components: {
        mealcreate   // <-- this
    }
});