Laravel With Quasar SPA

Simple basic integration of Laravel (v5.8) with Quasar Framework (v1.0.5).

Step 1: Install Laravel using Composer

$ composer create-project --prefer-dist laravel/laravel Laravel

Here our application name is Laravel.

$ composer install

Step 2: Install Vue CLI and Quasar CLI Globally

$ npm install -g @vue/cli
$ npm install -g @quasar/cli

If the installation goes well, you will get the version number with the command below in the terminal for vue and quasar respectively.

$ vue -V
$ quasar

Step 3: In the Laravel root directory run the command

$ quasar create quasarapp

The above command will output the following directory structure

Step 4: Build the quasar app

$ cd quasarapp
$ quasar build

The above command will output the following directory structure

Step 5: Install project level npm for Laravel

$ cd Laravel
$ npm install

Upon successful execution of the above npm command, node_modules folder will be created in the Laravel root folder with the respective npm packages and dependencies specified in the package.json

Step 6: Update Laravel webpack.mix.js to copy the quasar build app to laravel public directory and serve from laravel.

mix
.copy('quasarapp/dist/spa/index.html', 'resources/views/app.blade.php')
.copyDirectory('quasarapp/dist/spa', 'public');

Create a blank app.blade.php at resources/views directory and then run laravel mix command:

 $ npm run dev

The above npm command is the most important point for linking the quasar spa app with laravel as it published the build product of quasar to laravel respective folders. (for production: npm run production)

Step 7: Update routes/web.php

Route::get('{any}', function () {
    return view('app');
})->where('any','.*');

Step 8: .htaccess update

I have also added the .htaccess rules as follows to prevent refresh redirect and other redirect request.

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/api [NC]
RewriteRule . /index.php [L]
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]

Miscellaneous

1. To remove the ‘//’ from url, update quasar.config.js build settings by enabling vueRouterMode: ‘history’
2. I am using php7.3 with apache and laravel is serve over localhost with virtual host
3. This is basic level integration, complex logic and components could be added to quasar and then build + serve over laravel
4. I plan to use Laravel Passport for backend authentication (Actually, I have used Laravel Passport Client and its working great.)
5. I have tested with Laravel 6.2 and Quasar 1.5.2 and it is still working as on December — 2019
6. Here is a repo link: https://gitlab.com/rinfelc/laravel-quasar.git
7. All API related routes to Laravel backend should be specified in the routes/api.php

PS: I didn’t find a simple guide to integrate Laravel and Quasar SPA using CLI, so here is my guide. Thank You for dropping by.