Creating a New SPA

Run the artisan command make:app:

#for usage instructions
php artisan help make:app

Load View in Controller

For this we will be using a new layout file that provides some nice helpers for us. You can create a new view file for each SPA or make/use a generic one.

@extends('layouts.vue')

@section('title')
SPA Title
@endsection

Is the all that is required, the layout handles everything else.

Helpers in Layouts.Vue

Two very common tasks are adding javascript variables to the file to be used to initialize state and adding additional script resources. Here is an example of how to create a view call in a Laravel controller.

function my_controller_method() {
    return view('my.file.path')->with([
        'appName' => 'dashboard',
        'javascriptVariables' => [
                ['name' => 'var1', 'value' => 123],
                ['name' => 'var2', 'value' => 'another value'],
        ],
        'scriptFiles' => [
            'js/jquery.tablesorter.js',
        ],
    ]);
}

This would result in:

  1. Your SPA's javascript file being included automatically.
  2. The variables var1 and var2 being declared at the global scope.
  3. The jQuery tablesorter plugin script file being injected into the page before your app loads.