Pass data from blade file directly to Vue instance

Question

I am working on a Vue application that's living in a Laravel project. I bind my vue instance to an id that's placed in a blade file.

What I would like to do is to pass the logged user to my Vue instance from Laravel/blade. Is there a way to do this? I know you can pass data through props but this here is just a regular div with an id of #root that's binding the Vue instance. I know how to get the logged user, but I am specific looking for an way to directly pass the data from blade to my vue instance.

app.js

// Require the deps from laravel (jQuery, axios, Bootstrap)
require('./bootstrap');

// Import vue deps
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)

// Import the router & routes
import router from './routes'

// Init a new vue instance
const root = new Vue({
    el: '#root',
    data: {
        User: name here..
    },
    router
});

Blade

@extends('layouts.app')

@section('content')

<!-- pass user below -->
<div id="root"></div>

@endsection

HotRod HotRod · Accepted Answer · 2018-04-16T16:22:49

In your blade file, pass the logged user information to a javascript global variable. Let's say you just want the user id and name:

<script>
    window.auth_user = {!! json_encode([
        'id'     => auth()->user()->id,
        'name'   => auth()->user()->name
    ]) !!};
</script>

Then in your javascript, you can access the auth_user global variable. For example, to log the user name:

console.log(auth_user.name)

or

console.log(window.auth_user.name)

Pass data from blade file directly to Vue instance

3 Answers