Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view–controller (MVC) architectural pattern and based on Symfony.

The Quasar Framework is a node.js based collection of tools for developing and publishing a website; for building and optimising a progressive web-app; a way to make native apps for Linux, MacOS and Windows with Electron; and even a system for creating mobile apps for Android and iOS with Cordova

Sometimes it becomes quite complex to use Quasar app with Laravel. Developers face a lot of issues to serve quasar application from laravel app, because of laravel and quasar both are served independently at different port ( By default - Laravel port : 8000 and Quasar port : 8080), that’s why it prevents requests being made from one origin to another.

In this blog we are trying to explain step by step process to serve Quasar app using Laravel app.

Requirements :

Before integrating quasar project with laravel, you need to make sure that you have installed vue-cli & quasar-cli globally. Following commands will do this for you -

$ npm install -g @vue/cli

$ npm install -g @quasar-cli

For more information on vue-cli and quasar-cli, visit: quasar doc

Project Setup :

Before moving forward, firstly let us understand ‘How to integrate quasar app with laravel’. If you have already done, then you can skip these three steps.

Step-1 :- Setup a new laravel project -

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

Step-2 :- Setup a new laravel project -

1. Change directory to your quasar project

$ cd LaravelProject

2. Create a new quasar project

$ quasar create QuasarProject

Step-3 :- Install dependencies for newly created quasar project

1. Change directory to your quasar project

$ cd QuasarProject

2. Install npm

$ npm install

3. Start development server for your quasar project

$ quasar dev

Now, you have successfully integrated your quasar project with laravel app.

Note :- If your quasar app is using API built in laravel app in following manner as shown in below image

then, following problem you may face.

There are two methods to resolve this issue

• You can add these two lines in conf file of laravel project.
• you can prefer barryvdh/laravel-cors package would allow to access API from one origin to another. To install this package follow the documentation on github. Installation of barryvdh/laravel-cors package

Serve Quasar App :

If integration of quasar app with laravel is done, then it’s time to serve quasar app using laravel. For that, follow below steps :-

Step-1 :- Change directory to quasar project

$ cd QuasarProject

Step-2 :- Run the command

$ quasar build

Step-3 :- Change directory to public directory of laravel app

$ cd LaravelProject/public

Step-4 :- Create a link between quasar build and public directory of laravel app.

$ ln -s ../QuasarProject/dist/build directory name/link name

Step-5 :- Update home (‘/’) route in web.php file as shown below -

This route would serve quasar app whenever you access home (‘/’) route of laravel app by redirecting you to ‘/web’ route that is the link we created in step 4.

You also need to modify .htaccess file situated in link directory (‘public/web’) as shown in the following figure.

You’re done. Now laravel app would serve quasar app on accessing home (‘/’) route.