VueJS
This is the file structure when you generate a project with NextJS with npm create vue@latest my-vue-app
Steps
1. Open the index.html file at the root of your project
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>2. Modify the <head> section to include your PWA configuration
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="manifest"
href="https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/manifest.json"
/>
<script
type="module"
src="https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/webworker.js"
></script>
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>3. Download sw.js and place it inside the /public directory
sw.js
importScripts(
'https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/serviceworker.js'
);4. Vue file directory should look like this
5. Your PWA is now active in the Vue app
Last updated on