how to pass laravel route parameter to vue

Question

i m new to vue & i does lots of google but have not found any solution which is match to my current situation so don't know how i can pass route in vue component, is there any way to pass this laravel route into vue template as below. my vue is location is resource/assets/js here is code

               <template>
                   <a href={{route('/')}}></a>//i want to pass laravel route 
                                               //to view component this line 
                                                //throw error
               </template>

route(web.php) code

        Route::get('/' , function(){

                 Return view('homepage');
          });

i want to pass this url into vue component whose location (vue) is resource/assets/js

Solution 1

Try with

<a :href="{{route('/')}}"> or <a v-bind:href="{{route('/')}}">

Solution 2

You have to pass it as a prop inside your vue component. They are two different steps.

1. Laravel spits out the compiled template

2. Vue parses the components and initializes them.

At step 2 you have to pass a prop with the route parsed at step 1

Something like this

<my-component route="{{ route('my-route') }}"></my-component>

Then within your component

<template>
    <a :href="route">CLICK HERE</a>
</template>

<script>
...
props: {
    route: { type: String, required: true }
}
...
</script>

Solution 3

Don't use double curly brackets in your Vue components in relation to Blade. They are not functionally equivalent. Instead, pass the url as a string or bind it to a data attribute. The interpolation error you're seeing is a result of using the curly brackets and expecting them to be rendered vie the blade engine.

Your example is quite simple as route('/') is equivalent to just /.

// this is all you need to hit your defined route.
<a href="/">...</a>

Take a look at this package for generating client side routes and helpers in the Laravel fashion. Quite a handy package, I might add. I've used it myself in several larger projects.

https://github.com/aaronlord/laroute

As an aside, you mean the resources location resource/assets/js. Ultimately, that component will be located within your public directory if you use a build tool such as webpack, grunt, gulp, etc. so it's current location within the project directory isn't particularly relevant.

Solution 4

OK, since none of above really worked for me, my solution is:

<my-component route="'{{ route('my-route') }}'"></my-component>

(This is an example of passing a route through component's props, but should work the same when used within <a href=...)

For me looks like Vue doesn't know that you're trying to pass a string so tries to evaluate your route as an expression. Quotes tell Vue that you want this to be a string.

Another solution, which works for passing almost everything (for instance whole objects) to Vue is encoding your variable using JSON format like:

<my-component route="{{ json_encode(route('my-route')) }}"></my-component>

Or Laravel 5.5 and up you can use @json shortcut Blade directive for json_encode:

<my-component route='@json(route('my-route'))'></my-component>

Going further about JSON and objects - if Blade destroys your object data because of escaping the content you can use the following code:

<my-component route="{!! json_encode(route('my-route')) !!}"></my-component>

More on JSON and escaping data in Blade you can find here.

View more solutions

Comments

[Rocky]

href={{route('/')}}: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">. and if is use v-bind or :href={{route('/')}} it throw error raw expression {{route('/')}}

[Abdulla Nilam]

Assume that Vue js is running

[Rocky]

both throw error here is description href={{route('/')}}: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">. and if is use v-bind or :href={{route('/')}} it throw error raw expression {{route('/')}}

[Abdulla Nilam]

i used this didn't get issue like this

[Rocky]

can you show me example code note: my vue js file is in resource/asset/js

[Abdulla Nilam]

check this scotch.io/tutorials/…

[Rocky]

no help :( this solution haven't match to my current condition

[tiagojpdias]

You have to pass the prop in your component. Without seeing any code is hard to debug further than this.