How to pass a variable from laravel 5.4 to vuejs

Question

Is it possible to pass a variable from controller to vuejs? I have read some answers but nothing seems to work for me. I want to pass the variable $url to vue. I have tried some thing like this

var url = {!! $url !!}; this gives me syntax error: unexpected token in app.js

example url http://eventregistry.org/json/suggestConcepts?prefix=sam&lang=eng&callback=JSON_CALLBACK

Controller

class SearchCompanyName extends Controller
{
    public function getcompanyname($name)
    {
      return "http://eventregistry.org/json/suggestConcepts?prefix=" . $name . "&lang=eng&callback=JSON_CALLBACK";
    }   

    public function index()
    {  
       $url = $this->getcompanyname(Input::get("company_name_by_user"));
       return view('searchcompany', ['url' => $url]);

    }
}

vue app.js

Vue.component('search', require('./components/Searchnames.vue'));
const search = new Vue({
    el: '#search',
    data: {
    },
    method: {
        getMessages: function(){
            console.log('I am here')
        }()
    }
});

blade template

@section('content')
<div class="container">
{!! $url !!}
 <search></search>
</div>

@endsection

try addind a props to you search component : like <search :url={!! $url !!}></search> and in your vuejs component, add the props "url" and access the url via this.url. — ttncrch
– ttncrch, Commented Jun 7, 2017 at 15:16
what is the syntax error? What does the source of var url = {!! $url !!}; look like on the page? — whoacowboy
– whoacowboy, Commented Jun 7, 2017 at 15:22
adding o props gives also gives an error - invalid expression: :url=eventregistry.org/json/… — Imi
– Imi, Commented Jun 7, 2017 at 15:41
Adding a prop is the way to go. Read the vue docs about it. vuejs.org/v2/guide/components.html#Props — Amit Gupta
– Amit Gupta, Commented Jun 7, 2017 at 16:31

Chinonso Chukwuogor · Accepted Answer · 2017-06-07 15:29:51Z

1

If you want to declare your javascript variable in a script tag within a blade file, you need to put the variable in quotes like so

<script>
  var url = '{{ $url }}';
</script>

answered Jun 7, 2017 at 15:29

Chinonso Chukwuogor

5792 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Imi Over a year ago

Thanks this works but I was thinking how to access this variable in app.js

Chinonso Chukwuogor Over a year ago

@Imi How i achieve this is by defining all php-javascript variables in my main blade file like i showed above and then i reference it in the app.js script. make sure you call the app.js script after you declare the variables.

Imi Over a year ago

Thanks did not know we can do stuff like that :)

Farhad Hossen · Accepted Answer · 2017-06-07 17:43:25Z

1

You can use this package : https://github.com/laracasts/PHP-Vars-To-Js-Transformer

public function index()
{
    JavaScript::put([
        'foo' => 'bar',
        'user' => User::first(),
        'age' => 29
    ]);

    return View::make('hello');
}

answered Jun 7, 2017 at 17:43

Farhad Hossen

2731 silver badge6 bronze badges

1 Comment

killstreet Over a year ago

As I totally support this answer, I am unable to get this to work with laravel 5.4 properly. It keeps comming up with 'The use statement with non-compound name 'Javascript' has no effect'

Collectives™ on Stack Overflow

How to pass a variable from laravel 5.4 to vuejs

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related