Shared state with vuejs and Laravel 5.5

It took me some time to figure out how I could share data between vue components with Laravel 5.5.

First you will need to upgrade to the latest version with the command npm install vue ( “two-way binding” for a prop only works with vue 2.3.0+)

1. Add a data object and properties in your app.js file

const app = new Vue({
    el: '#app',
    data: {
        store: {
            showpagecontent: true
        }
    }
});

1. Add v-bind.sync to your vue component in your blade file(s)

<Globalsearch v-bind.sync="store"></Globalsearch>
<start v-bind.sync="store"></start>

1. Add the prop to your vue files:

props: ['showpagecontent'],

1. Change the value globally with:

this.$emit('update:showpagecontent', false);

In this example I´m hiding some elements on the page when doing a search.

Take a look at this changelog from vue