Laravel / VueJS PWA

Hello,

I have a Laravel / VueJS application and I want to have a PWA.

I have already done this with the silviolleite/laravelpwa package for pure Laravel applications, but the package is not appropriated for VueJS.

Who has already done a PWA with VueJS and how did you do ?

I just tried for some hours to use the vite-plugin-pwa plugin, several tutorials show how to use it, but nothing works as expected for me ... the tutorials are with a pure VueJS application, but I have a Laravel / VueJS application.

Any idea ?

Thanks for your help.

vincent15000

7 months ago

Best Answer

Level 63

I just found the solution with this configuration with the vite-plugin-pwa.

VitePWA({
    buildBase: '/build/',
    scope: '/',
    base: '/',
    registerType: 'autoUpdate',
    devOptions: {
        enabled: false,
    },
    injectRegister: 'auto',
    includeAssets: [],
    manifest: {
        name: 'Les Meeples Perdus d\'Aurillac',
        short_name: 'MPA',
        start_url: '/',
        scope: '/',
        background_color: '#ffffff',
        theme_color: '#ffffff',
        display: 'standalone',
        orientation: 'any',
        status_bar: '#ffffff',
        icons: [
            {
                src: '/pwa/icon-72x72.png',
                sizes: '72x72',
                type: 'image/png',
            },
            {
                src: '/pwa/icon-96x96.png',
                sizes: '96x96',
                type: 'image/png',
            },
            {
                src: '/pwa/icon-128x128.png',
                sizes: '128x128',
                type: 'image/png',
            },
            {
                src: '/pwa/icon-144x144.png',
                sizes: '144x144',
                type: 'image/png',
            },
            {
                src: '/pwa/icon-152x152.png',
                sizes: '152x152',
                type: 'image/png',
            },
            {
                src: '/pwa/icon-192x192.png',
                sizes: '192x192',
                type: 'image/png',
            },
            {
                src: '/pwa/icon-384x384.png',
                sizes: '384x384',
                type: 'image/png',
            },
            {
                src: '/pwa/icon-512x512.png',
                sizes: '512x512',
                type: 'image/png',
            },
        ],
    //     // 'splash' => [
    //     //     '640x1136' => '/pwa/splash-640x1136.png',
    //     //     '750x1334' => '/pwa/splash-750x1334.png',
    //     //     '828x1792' => '/pwa/splash-828x1792.png',
    //     //     '1125x2436' => '/pwa/splash-1125x2436.png',
    //     //     '1242x2208' => '/pwa/splash-1242x2208.png',
    //     //     '1242x2688' => '/pwa/splash-1242x2688.png',
    //     //     '1536x2048' => '/pwa/splash-1536x2048.png',
    //     //     '1668x2224' => '/pwa/splash-1668x2224.png',
    //     //     '1668x2388' => '/pwa/splash-1668x2388.png',
    //     //     '2048x2732' => '/pwa/splash-2048x2732.png',
    //     // ],
    },
    workbox: {
        globPatterns: ["**/*.{js,css,html,ico,png,svg,webmanifest}"],
        runtimeCaching: [
            {
                urlPattern: ({ request }) => request.destination === 'style' || request.destination === 'script' || request.destination === 'worker',
                handler: 'StaleWhileRevalidate',
                options: {
                    cacheName: 'static-resources',
                    expiration: {
                        maxEntries: 50,
                        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
                    },
                },
            },
            {
                urlPattern: ({ request }) => request.destination === 'image',
                handler: 'CacheFirst',
                options: {
                    cacheName: 'images',
                    expiration: {
                        maxEntries: 100,
                        maxAgeSeconds: 60 * 24 * 60 * 60, // 60 days
                    },
                },
            },
        ],
    },
}),

1 like

martinbean

7 months ago

Level 80

@vincent15000 It completely depends what PWA features you’re actually wanting to implement for your app.

PWAs are mainly based around a service worker. These are completely library- and framework-agnostic. They’re just JavaScript files.

1 like

LaryAI

7 months ago

Level 58

Certainly! Here’s how you can set up a PWA in a Laravel + Vue 3 (with Vite) application using the vite-plugin-pwa package.

1. Install the Plugin

First, install the plugin in your Laravel project (inside the resources/js directory if you keep your frontend assets there):

npm install vite-plugin-pwa --save-dev

2. Configure Vite

Open your vite.config.js (or vite.config.ts if using TypeScript) in the root of your Laravel project and add the PWA plugin:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        vue(),
        VitePWA({
            registerType: 'autoUpdate',
            manifest: {
                name: 'My Laravel Vue PWA',
                short_name: 'LaravelPWA',
                start_url: '/',
                display: 'standalone',
                background_color: '#ffffff',
                theme_color: '#4DBA87',
                icons: [
                    {
                        src: '/icon-192x192.png',
                        sizes: '192x192',
                        type: 'image/png',
                    },
                    {
                        src: '/icon-512x512.png',
                        sizes: '512x512',
                        type: 'image/png',
                    },
                ],
            },
        }),
    ],
});

Note: Place your icon files (icon-192x192.png, icon-512x512.png) in the public directory.

3. Register the Service Worker in Vue

In your main Vue entry file (e.g., resources/js/app.js or main.js), add:

import { registerSW } from 'virtual:pwa-register';

registerSW();

4. Build and Test

Run your development server:

npm run dev

Or build for production:

npm run build

Then, serve your Laravel app (e.g., php artisan serve) and visit it in your browser. You should see the PWA install prompt and be able to use it offline.

5. Troubleshooting

Make sure your icons are accessible at /icon-192x192.png and /icon-512x512.png.
Clear your browser cache or use a private window if you’re not seeing updates.
Check the browser console for service worker errors.

Summary:
You don’t need to use silviolleite/laravelpwa for Vue. Instead, use vite-plugin-pwa directly in your Vite config, and register the service worker in your Vue app. This approach works seamlessly with Laravel + Vue + Vite.

Let me know if you need a more detailed step-by-step or run into any issues!

Please or to participate in this conversation.