How can I use Blade in Vue files?

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 compiler 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?

Answer

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.com/vue"></script>
<div id="content" hidden>
    Hello world
</div>

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

I found a post having the same issue as you