How to enhance an existing Laravel project with VueJS?

1. Rebuild your basic structure into a Vue template:

// MyTemplate.vue
<template>
  <div> <!-- keep this single "parent" div in your template -->

    <!-- your Blade layout here -->

  </div>
</template>

<script>
  export default {
    props: [ 'data' ]
  }
</script>

2. Add your Vue template as a global component in app.js:

// app.js
import Vue from 'vue';
window.Vue = Vue;

Vue.component('my-template', require('./MyTemplate.vue').default);

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

3. Use this new Vue template in your Blade template as below:

<my-template :data="{{ $onePhpVarThatHoldsAllYourData }}></my-template>

Once inside the Vue template, you will not be able to reach back to your Laravel methods (e.g. @auth) or for additional data without an Ajax request, so make sure you package all the data you need in your Vue template up front. All of the data you send in will be prefixed inside the Vue template with the name of the prop you assign it to, in this case data.

4. Convert your Blade directives to Vue directives:

Loops (e.g. @foreach) to v-fors:

@foreach ($items as $item)
  <li>{{ $item }}</li>
@endforeach

becomes

  <li v-for="item in data.items">{{ item }}</li>

Control structures (e.g. @if ($something !== $somethingElse) ... @endif) to v-ifs:

<div v-if="data.something !== data.somethingElse">
...
</div>