Start a new Laravel project:
laravel new laravel-vue-app --git
cd laravel-vue-app
Install Vue:
npm i vue@next
npm i @vitejs/plugin-vue
Edit vite.config.js
:
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import * as path from "path";
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "./resources/js"),
},
},
plugins: [
laravel({
input: "resources/js/main.js",
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
alias
will allow us to import files referring to them from the root of/resources/js
folder.
I like to rename resources\js\app.js
to resources\js\main.js
and this is what I put initially in it:
import "@/bootstrap";
import "../css/app.css";
import { createApp } from "vue";
import App from "@/App.vue";
createApp(App)
.mount("#app");
This is a bare-bone resources\js\App.vue
<template>
<section class="flex flex-col h-screen bg-gray-900">
foo
</section>
</template>
<script setup>
</script>
Now edit Laravel to serve the SPA.
The following route will serve the SPA for URL paths that do not start with /api
:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/{path}', fn () => view('app'))
->where('path', '(?!api).*');
This is resources\views\app.blade.php
. The SPA will be rendered inside of <div id="app"></div>
.
<!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>
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
@vite('resources/js/main.js')
</head>
<body class="antialiased">
<div id="app"></div>
</body>
</html>
Now you can serve your app.
php artisan serve
npm run dev
Top comments (0)