- Install Laravel UI
composer require laravel/ui - Install scaffolding
php artisan ui bootstrap –auth - Migrate
php artisan migrate - Install Vue
npm i vue@next @vitejs/plugin-vue –save-dev - Install and Run npm
npm install && npm run dev
Following files must be changed
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
});
resources/js/app.js
import './bootstrap';
import { createApp } from 'vue';
const app = createApp({});
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./views/ExampleComponent.vue -> <example-component></example-component>
*/
Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
app.component(path.split('/').pop().replace(/\\.\\w+$/, ''), definition.default);
});
app.mount('#app');
resources/views/layouts/app.blade.php
...
<body id="app">
...
In app/http/kernel.php uncomment this line (EnsureFrontendRequestsAreStateful)
'api' => [
\\Laravel\\Sanctum\\Http\\Middleware\\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\\Illuminate\\Routing\\Middleware\\SubstituteBindings::class,
],
In .env add next line
SANCTUM_STATEFUL_DOMAINS=myweb.site,localhost:3000,localhost:8080
#SESSION_DOMAIN=.myweb.site
#SESSION_DOMAIN=null
Full project in: GitLab
