vue-router + Laravel Spark (v4): How to get id into VueJS?

I'm starting a new app using Spark v4 (VueJS v2). If I go to /needs/1 I cannot for the life of me figure out how to get the 1 into VueJS as a component property. I believe it has to do with setting up to use vue-router.

Any help in setting up a very basic routing system in Spark using vue-resource would be greatly appreciated.

Here are my current pertinent files.

/resources/assets/js/app.js:

require('spark-bootstrap');

require('./components/bootstrap');

Vue.use(require('vue-resource'));
Vue.use(require('vue-truncate-filter'));

import VueRouter from 'vue-router';
const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/needs/:id', component: require('./components/needs/show'), name: 'id', props: true }
    ]
})

// Spin up the Vue instance
var app = new Vue({
    mixins: [require('spark')]
});

/resources/assets/js/components/bootstrap.js:

require('./../spark-components/bootstrap');

require('./home');

require('./settings/profile/update-profile-details');

require('./needs/show');

/resources/views/needs/show.blade.php:

@extends('spark::layouts.app')

@section('content')
<needs-show :user="user" :id="id" inline-template>
    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Need</div>

                    <div class="panel-body">
                        <h1>@{{ id }}</h1>
                    </div>
                </div>
            </div>
        </div>

    </div>
</needs-show>
@endsection

/resources/assets/js/components/needs/show.js:

Vue.component('needs-show', {
    props: ['user', 'id'],

    data() {
        return {
            need: []
        }
    },

    methods: {
    },

    mounted() {
    },
});

nateritter

9 years ago

Best Answer

Level 3

So, I'm going to document what I did here because I woke up in the middle of the night with what I think was a pretty great idea.

For my needs, all I wanted was the route parameter (although this could be useful for things like the entire request or any other variable or property available to Laravel).

Step 1. Remove all VueJS routing stuff. It's not necessary for this use case (keep the vue-resource though).

Now my /resources/assets/js/app.js looks like this:

require('spark-bootstrap');

require('./components/bootstrap');

Vue.use(require('vue-resource'));

// Spin up the Vue instance
var app = new Vue({
    mixins: [require('spark')]
});

/resources/assets/js/components/bootstrap.js is the same as the OP.

Step 2. For testing purposes, change the /resources/views/needs/show.blade.php to the following to show that what we'll build here works:

@extends('spark::layouts.app')

@section('content')
<needs-show :user="user" inline-template>
    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Need</div>

                    <div class="panel-body">
                        <pre>ID: @{{ spark.route.id }}</pre>
                    </div>
                </div>
            </div>
        </div>

    </div>
</needs-show>
@endsection

Step 3. Add the current route parameters to a custom Spark JS variable in /resources/views/vendor/spark/layouts/app.blade.php like so:

    <!-- Global Spark Object -->
    <script>
        window.Spark = <?php echo json_encode(array_merge(
            Spark::scriptVariables(), [
                'route' => Route::current()->parameters()
            ]
        )); ?>;
    </script>

Step 4. Profit.

Assumed: You know the route parameters are set via your routes file, so something like this would have to exist:

    Route::get('/needs/{id}', [
        'as'        => 'needs.show',
        'uses'      => 'NeedsController@show',
    ]);

... and your controller would have to return the appropriate view:

    public function show(Need $need)
    {
        return view('needs.show');
    }

... and just for completeness, here's my /resources/assets/js/components/needs/show.js as well:

Vue.component('needs-show', {
    props: ['user'],

    data() {
        return {
        }
    },

    methods: {
    },

    mounted() {
    },
});

1 like

dcrawkstar

9 years ago

Level 1

Have you considered using vue's dynamic components with $emit... Spark already provides the Bus object to pass around messages globally

nateritter

9 years ago

Level 3

@dcrawkstar I have used $emit in the past for what you've mentioned, but in this case I didn't really need anything passed around from component to component. Having the parameters globally available was all I needed for this application.

Please or to participate in this conversation.