Last night I was tinkering around with a new Laravel application I am buiilding and I finally decicded to attempt something I'd been wanting to do for a while.

Most of my Laravel development consists of me creating a bunch of API endpoints and then wiring up a bunch of Vue.js components to access them. The only catch is I have to create a blade view to call the Vue.js component.

The Old Way

I'm normally create a new blade file looking something like this:

@extends('layouts.app')
@section('content')
    <users-index></users-index>
@endsection('content)

Then I'd create a controller that just has a function that looks like this:

public function index()
{
    return view('users.index');
}

After all that I'd add the route:

Route::get('users', 'UsersController@index');

The New Way

Instead of all that I wanted a way to load a Vue.js component straight from the Route. Inspired by the Route::view() I created Route::vue().

So now I can just do:

Route::vue('users', 'users-index');

It's a pretty simple macro that I've added to the Route class which actually calls a "special" (actually really basic) blade file.

I decided to make it into a little package anyone can use if they would rather not set it up themselves.

You can check it out on Github. Or just install it via composer:

composer require vmitchell85/vue-route

Hope this helps you out.

Note: If you have another method of accomplishing the same thing or have some ideas for improvement please let me know!