ekrist1
168
0
Tips

Shared state with vuejs and Laravel 5.5

Posted 1 year ago by ekrist1

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

Please sign in or create an account to participate in this conversation.