- Перестройте свою базовую c структуру в Vue шаблон:
// MyTemplate.vue
<template>
<div> <!-- keep this single "parent" div in your template -->
<!-- your Blade layout here -->
</div>
</template>
<script>
export default {
props: [ 'data' ]
}
</script>
Добавьте ваш шаблон Vue в качестве глобального компонента в приложение. js:
// app.js
import Vue from 'vue';
window.Vue = Vue;
Vue.component('my-template', require('./MyTemplate.vue').default);
const app = new Vue({
el: '#app'
});
Используйте этот новый шаблон Vue в своем шаблоне Blade, как показано ниже:
<my-template :data="{{ $onePhpVarThatHoldsAllYourData }}></my-template>
Оказавшись внутри шаблона Vue, вы не сможете вернуться к своему Laravel методы (например, @auth) или для дополнительных данных без запроса Ajax, поэтому убедитесь, что все необходимые данные упакованы в шаблон Vue заранее. Все данные, которые вы отправляете, будут иметь префикс внутри шаблона Vue с названием реквизита, которому вы его назначаете, в данном случае data.
Преобразуйте ваши директивы Blade в Vue директивы:
Петли (например, @foreach) в v-for с:
@foreach ($items as $item)
<li>{{ $item }}</li>
@endforeach
становится
<li v-for="item in data.items">{{ item }}</li>
Управляющие структуры (например, @if ($something !== $somethingElse) ... @endif) до v-if с:
<div v-if="data.something !== data.somethingElse">
...
</div>