Se você quer passar alguma variável PHP para o Vue, será através de props.
Você pode até passar a variável dentro de um tag <script>
, entretanto, eu não gosto desta abordagem.
Opnião pessoal
Acredito que será mais fácil usar o Axios / VueResource na rota desejada e retornar os dados.
Por padrão o Laravel já retorna Json
A partir deste momento possui dois caminhos:
1º Fazer tudo em um componente Vue e chamar ele dentro do Blade
2º Fazer tudo no Blade, dentro de uma div que será controlada pelo Vue.
Exemplo
Blade.php
<div id="app">
<form action="/projects" method="post" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
<div class="form-group">
<label for="name">Project Name</label>
<input type="text" name="name" id="name" class="form-control" v-model="form.name">
<span class="alert" v-if="form.errors.has('name')"> @{{ form.errors.get('name') }} </span>
</div>
<div class="form-group">
<label for="description">Project Description</label>
<input type="text" name="description" id="description" class="form-control" v-model="form.description">
<span class="alert" v-if="form.errors.has('description')"> @{{ form.errors.get('description') }} </span>
</div>
<div class="form-group">
<button class="btn btn-primary" :disabled="form.errors.any()">Create</button>
</div>
</form>
</div>
App.js
class Errors {
constructor() {
this.errors = {}
}
has(field) {
return this.errors.hasOwnProperty(field)
}
any() {
return Object.keys(this.errors).length > 0
}
get(field) {
if (this.errors[field]) {
return this.errors[field][0]
}
}
record(errors) {
this.errors = errors
}
clear(field) {
if (field) {
return delete this.errors[field]
}
this.errors = {}
}
}
class Form {
constructor(data) {
this.originalData = data
for (let field in data) {
this[field] = data[field]
}
this.errors = new Errors()
}
data() {
let data = Object.assign({}, this)
delete data.originalData
delete data.errors
return data
}
reset() {
for (let field in this.originalData) {
this[field] = ''
}
}
submit(requestType, url) {
axios[requestType](url, this.data())
.then(this.onSuccess.bind(this))
.catch(this.onFail.bind(this))
}
onSuccess(response) {
alert(response.data.message)
this.errors.clear()
this.reset()
}
onFail(error) {
this.errors.record(error.response.data.errors)
}
}
new Vue({
el: '#app',
data: {
form: new Form({
name: '',
description: ''
})
},
methods: {
onSubmit() {
this.form.submit('post', '/projects')
}
}
})