How to Serve Vue-CLI using Laravel index.php

Viewed 3417

I have bought a Vue template which use vue-cli. The problem is, when I run npm run dev the app is running at http://localhost:8080/

I already have laravel running at https://develop.local/

How to run the vue-cli server to https://develop.local/ (in development mode)?

How to configure and move index.html (from vue directory) into laravel's resources/views/index.blade.php so that it can be processed by laravel's public/index.php ?

Thank you very much.

2 Answers

You need a bit Laravel knowledge .Mainly Laravel uses resources\assets\js folder related with VueJs or another javascript lib. VueJs components need to be located under resources\assets\js\components folder .

First you can compile your bought vuejs themplate and locate it according to resources\assets\js and resources\assets\js\components folder .After that you may use your components on the resources/views/index.blade.php or another blade page.

The Rest is Laravel businees .

Laravel already configures that for you. So, to use Vue in Laravel you must install laravel-mix and vuejs dependencies. You can do that by running the npm install command in your terminal.

After that, you should use the vue components. You can add any component into any blade pages. You must add app.js into that page. Don't forget to run the npm run watch command to build all custom JavaScript code.

Related