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