Al utilizar el sitio web AlfaVila.com, acepta el uso de cookies para mejorar el nivel de servicio.

Create a multiple-page application (MPA) with Laravel 9 and Vue 3 and Auth

  1. Install Laravel UI
    composer require laravel/ui
  2. Install scaffolding
    php artisan ui bootstrap –auth
  3. Migrate
    php artisan migrate
  4. Install Vue
    npm i vue@next @vitejs/plugin-vue –save-dev
  5. 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

Create a multiple-page application (MPA) with Laravel 9 and Vue 3 and Auth

Comparte este post

¿Cómo funciona Scrumban?

La metodología Scrumban toma características tanto de la estrategia Scrum como de Kanban. El proceso