I'm trying to use Blade in my Vue file carousel-signUp.vue

Like:

<template>
    <div>           
        <form action="{{route('dump')}}" method="POST" >
           /* Some code here...*/
        </form>
   </div>
</template>

But in the end I'm getting an error.

The piler can't understand the difference between Vue syntax and Blade syntax. How can I define Blade syntax in Vue files?

Or, does anyone have an idea how to use {{route('dump')}} value in my vue file?

I'm trying to use Blade in my Vue file carousel-signUp.vue

Like:

<template>
    <div>           
        <form action="{{route('dump')}}" method="POST" >
           /* Some code here...*/
        </form>
   </div>
</template>

But in the end I'm getting an error.

The piler can't understand the difference between Vue syntax and Blade syntax. How can I define Blade syntax in Vue files?

Or, does anyone have an idea how to use {{route('dump')}} value in my vue file?

• javascript
• laravel
• vue.js
• laravel-blade
• vue-ponent

• Blade cannot be used in vue files. – Ikbel Commented Jul 18, 2017 at 10:10
• have any idea for using {{route('dump')}} value in my vue file ?? :( – Mahdi Toosi Commented Jul 18, 2017 at 10:58

4 Answers 4

A better solution might be to output the desired blade variables to (hidden) html and select that html in your Vue code. Escape the curly braces for Vue with @.

Your blade example.blade.php

<div id="content" hidden>
    {{ bladeVar }}
</div>

<div id="app">
    @{{ vueVar }}
</div>

The result of that blade (how it will look in the cached file) + javascript (Vue)

var app = new Vue({
    el: '#app',
    data: {
        vueVar: document.getElementById('content').innerHTML + 'from Vue'
    }
});

<script src="https://unpkg./vue"></script>
<div id="content" hidden>
    Hello world
</div>

<div id="app">
    {{ vueVar }}
</div>

I found a post having the same issue as you

You can't use blade in your Vue files, but you can use Vue slots so you can send the content from your blade file to the ponent:

Vue file

<template>
    <div>           
        <slot></slot>
    </div>
</template>

Blade

<carousel-sign-up>
    <form action="{{route('dump')}}" method="POST" >
        /* Some code here...*/
    </form>
</carousel-sign-up>

This will be useful when your ponents should have dynamic content. If in that ponent you only will need that route from blade and the form will be ever the same, look at @Mick answer.

You can parse your data to Json and then you can redirect your blade to vue Companent. I will mention below about it.

<your-panent data={{$yourDataFromBackEnd}}></your-panent>

Like that, you can catch as "data" in Vue if you have experience on VueJs.

You could pass the "{{route('dump')}}" as a prop to the ponent.

<ponent route="/yourRouteHere"> </ponent>

https://v2.vuejs/v2/guide/ponents.html#Props

Mick