feat: add integrations and PHP (Laravel) docs

.vitepress/config.ts

@@ -195,6 +195,17 @@ const Workbox = [
   },
 ]
 
+const Integrations = [
+  {
+    text: 'Getting Started',
+    link: '/integrations/',
+  },
+  {
+    text: 'Laravel',
+    link: '/integrations/laravel',
+  },
+]
+
 function prepareSidebar(idx: number) {
   return [
     {
@@ -227,6 +238,12 @@ function prepareSidebar(idx: number) {
       collapsed: true,
       items: Workbox,
     },
+    {
+      text: 'Integrations',
+      collapsible: true,
+      collapsed: true,
+      items: Integrations,
+    },
   ].map((entry, i) => {
     if (idx === i)
       entry.collapsed = false
@@ -250,7 +267,7 @@ export default withPwa(defineConfig({
     ['meta', { name: 'author', content: 'Anthony Fu' }],
     ['meta', {
       name: 'keywords',
-      content: 'PWA, React, Vue, VitePress, Preact, Svelte, SvelteKit, workbox, SolidJS, Vite, vite-plugin, îles, Astro',
+      content: 'PWA, React, Vue, VitePress, Preact, Svelte, SvelteKit, workbox, SolidJS, Vite, vite-plugin, îles, Astro, Laravel, Laravel Vite plugin',
     }],
     ['meta', { property: 'og:type', content: 'website' }],
     ['meta', { property: 'og:title', content: 'Vite Plugin PWA' }],
@@ -376,6 +393,7 @@ export default withPwa(defineConfig({
       '/examples/': prepareSidebar(2),
       '/deployment/': prepareSidebar(3),
       '/workbox/': prepareSidebar(4),
+      '/integrations/': prepareSidebar(5),
     },
   },
   vite: {

integrations/index.md

@@ -0,0 +1,16 @@
+---
+title: Integrations | Guide
+previous: injectManifest | Workbox
+---
+
+# Integrations
+
+This section is about integrations with other languages and frameworks via Vite plugins.
+
+## PHP
+
+### Laravel
+
+You can use [laravel-vite-plugin](https://github.com/laravel/vite-plugin) to integrate your Laravel application with Vite.
+
+Check [Laravel](/integrations/laravel) for more information about using `vite-plugin-pwa` plugin.

integrations/laravel.md

@@ -0,0 +1,100 @@
+---
+title: Laravel | Integrations
+---
+
+# Laravel
+
+We assume you're using `laravel-vite-plugin` to integrate your Laravel application with Vite.
+
+## Installation
+
+Install `vite-plugin-pwa` plugin as dev dependency using `npm` or `yarn` or `pnpm`:
+```shell
+npm i vite-plugin-pwa -D
+yarn add vite-plugin-pwa -D
+pnpm add -D vite-plugin-pwa
+```
+
+## Configuration
+
+You need to add `vite-plugin-pwa` to your `vite.config.js` file:
+```ts
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default {
+  plugins: [
+    VitePWA({ /* PWA options */ })
+  ]
+}
+```
+
+Since `laravel-vite-plugin` is configuring Vite to use `public/build` folder as root build folder, you need to configure `vite-plugin-pwa` to change the path to include `/build/` in your Laravel base path (by default `/`):
+```ts
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default {
+  plugins: [
+    VitePWA({
+      buildBase: '/build/' // <== this is the default value, since base will be `/`
+    })
+  ]
+}
+```
+
+## Registering Service Worker
+
+Please read [Register Service Worker](/guide/register-service-worker) section for more information.
+
+We suggest you to use `virtual:pwa-register` (VanillaJS) virtual module to register the service worker in your Laravel application, include this code in your `resources/js/app.js` file:
+```ts
+import { registerSW } from 'virtual:pwa-register';
+
+registerSW({ /* options */ });
+```
+
+If you're using TypeScript, you may also need to register `vite-plugin-pwa/cleint` in your `tsconfig.json` file:
+```json
+{
+  "compilerOptions": {
+    "types": ["vite-client", "vite-plugin-pwa/client"]
+  }
+}
+```
+
+## Registering Web Manifest
+
+To register the PWA web manifest in your Nuxt 3 application, `vite-plugin-pwa` exposes `virtual:pwa-info` virtual module you can use to write the web manifest:
+```ts
+/// <reference types="vite-plugin-pwa/info" />
+
+import { pwaInfo } from 'virtual:pwa-info';
+
+if (pwaInfo) {
+  const href = pwaInfo.webManifest.href;
+  /* add link to head: href is the link */
+  const linkElement = document.createElement("link");
+  linkElement.setAttribute("rel", "manifest");
+  linkElement.setAttribute("href", href);
+  if (pwaInfo.webManifest.useCredentials) {
+    linkElement.setAttribute("crossorigin", 'use-credentials');
+  }
+  document.head.appendChild(linkElement);
+}
+```
+
+If you're ont using TypeScript, you can omit the `/// <reference types="vite-plugin-pwa/info" />` line.
+
+If you're using TypeScript, you may also need to register `vite-plugin-pwa/info` in your `tsconfig.json` file:
+```json
+{
+  "compilerOptions": {
+    "types": ["vite-client", "vite-plugin-pwa/info"]
+  }
+}
+```
+
+or include a `vite-env.d.ts` file in your root or source folder:
+```ts
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/info" />
+```

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-pwa-docs",
-  "version": "0.14.1",
-  "packageManager": "pnpm@7.26.1",
+  "version": "0.14.3",
+  "packageManager": "pnpm@7.27.0",
   "description": "Zero-config PWA for Vite Documentation",
   "author": "antfu <[email protected]>",
   "license": "MIT",
@@ -27,7 +27,9 @@
     "astro",
     "astro-integration",
     "iles",
-    "nuxt"
+    "nuxt",
+    "laravel",
+    "laravel-vite-plugin"
   ],
   "scripts": {
     "dev": "vitepress dev",

workbox/inject-manifest.md

@@ -1,5 +1,6 @@
 ---
 title: injectManifest | Workbox
+next: Getting Started | Integrations
 ---
 
 # injectManifest