I have an API created using Laravel and can be accessed through the URL: http://www.project.com/api using the virtual host in which http://www.project.com/ points to the public folder of the Laravel project. I also have a separate Vue project created using Vue CLI which connects and request data to the Laravel API and can be accessed through http://localhost:8080/.
My question is, can I integrate the 2 separate projects into a single project or URL and if yes, how?
Laravel come out of the box with Laravel Mix which you can use for compiling your Vue project and serve it through Laravel.
Here are steps to do it.
First you copy whole Vue project to /resources/render (you can change render to anything you like).
Go to your Laravel root folder and open up file named webpack.mix.js and change it to like this
const mix = require('laravel-mix');
// Assuming your Vue entry point is index.js
mix.js('resources/render/index.js', 'public/js');
Create a blade file as entry point in resources/views. In my case it's main.blade.php.
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="app">
{{-- Content --}}
</div>
</body>
<script type="application/javascript" src="{{ mix('js/app.js') }}"></script>
</html>
Go to your routes/web.php and put only this route in. It will handles all routes in your Vue app
Route::get('{path}', function () {
return view('index');
})->where('path', '^(.+)?$');
Run npm install and npm run watch to build and react to changes you make to your Vue app. (You might want to remove unwanted dependencies from package.json)
I have a similar project with this setup. You can see it here for better understanding
