diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index 45aaf2e..248a9a6 100644
--- a/.vitepress/config.ts
+++ b/.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: {
diff --git a/integrations/index.md b/integrations/index.md
new file mode 100644
index 0000000..2e2f4be
--- /dev/null
+++ b/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.
diff --git a/integrations/laravel.md b/integrations/laravel.md
new file mode 100644
index 0000000..5e6d891
--- /dev/null
+++ b/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
+///
+
+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 `/// ` 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
+///
+///
+```
diff --git a/package.json b/package.json
index 895e364..8bccfe7 100644
--- a/package.json
+++ b/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 ",
"license": "MIT",
@@ -27,7 +27,9 @@
"astro",
"astro-integration",
"iles",
- "nuxt"
+ "nuxt",
+ "laravel",
+ "laravel-vite-plugin"
],
"scripts": {
"dev": "vitepress dev",
diff --git a/workbox/inject-manifest.md b/workbox/inject-manifest.md
index 602f070..89789a2 100644
--- a/workbox/inject-manifest.md
+++ b/workbox/inject-manifest.md
@@ -1,5 +1,6 @@
---
title: injectManifest | Workbox
+next: Getting Started | Integrations
---
# injectManifest