Build a PWA With Vue & Ionic 4

I got some errors and after the research this is 2022 solution for Vue3 PWA:

- make sure it's capitalized "NetworkFirst", not "networkFirst" solution
- i haven't found any resources about "networkTimeoutSeconds" and "cacheableResponse" so I had to get rid of it.
- you can additionally put 'expiration' object with maxAgeSeconds and maxEntries properties

Hope it will help somebody.

Hello Brad, So you teach how to make a Vue App PWA Right? But What if i want to make a Vue.js app running on Vite make a PWA. I tried to do that but my app crashes:(

How can I make Vue.js app running on Vite PWA

I know this video was done quite a while ago, but I'm curious if anyone has any thoughts on using just Vue for PWAs, or is IONIC helpful in some way to make this a better combination? It isn't clear to me how I might benefit from IONIC in the PWA role. Always enjoy your videos!

I first saw your video where you taught how to do caching using just service workers. It had a lot of manual setups to be done. But after going through this video, Workbox API made a hell of a lot of things easier dude.
Thanks for your wonderful resources.

Awesome :)

can u make a tutorial? how to make this as an apk or bundle it and add it in google store or apple store? 😊😊😊😊😊😊

any idea as to why manifest.json is not being generated?

If I build a social media website in HTML CSS and vue3, will I be able to use this same code to make an app with ionic without having to make any changes?

I love your Vue tutorials! Thank you!

This is just a front end UI framework to mimic mobile interfaces? Vue + ionic cant access native device functionality or be built as an apk right? You would need to use capacitor or something like phonegap to make that happen?

Great tutorial!

So, I made this, and all in all it seems to work, but for some reason my app-cache is not being written to when I do requests, so I can't keep the data offline. URL seems to be just fine. I am also getting a TypeError, but dev tools aren't very specific where that could be. only happens in the deployed version, the one on my machine works without casting a typeerror

If you get warning "export ‘ICON_PATHS’ was not found in ‘ionicons/icons’' and npm install [email protected] --save-dev does not work, then:
1) open ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
2) comment out lines addIcons(ICON_PATHS); AND import { addIcons } from 'ionicons';
It should work now.

how does everyone find this course guys?

vue add @vue/pwa does not generate manifest.json :(

Everybody knows 90210

Nice tutorial! Thank you very much for recording it and sharing. I was using Vue + Vuetify and looking for something more advanced to learn to provide app like experience with PWA. I didn't know where to start and you've inspired me! Also I didn't know Ionic is being rolled out to VueJS. This is really exciting!

great work as always Brad. Hey Traversy fam - if you get this error (Mac, VSCode) 'node(51287,0x7fffab29a380) malloc: * mach_vm_map(size=9494189756595048448) failed (error code=3)
* error: can't allocate region
* set a breakpoint in malloc_error_break to debug
libc++abi.dylib: terminating with uncaught exception of type std::bad_alloc: std::bad_alloc
zsh: abort firebase deploy' then try running the following from your Terminal: npm install -g firebase-tools. Hope that helps - caused me a lot of frustration but hopefully others can avoid that issue.

Rather than doing this:
import ZipSearch from '../components/ZipSearch'


you can actually do this:
import ZipSearch from '@/components/ZipSearch'


As the @ sign is pointing always to the src folder.


Just a one cent tip;-)

That was really useful! Thank you.

to fix the "export ‘ICON_PATHS’ was not found in ‘ionicons/icons’


copy the dist folder from AppName\node_modules\@ionic\vue\dist (this folder has the files that are missing)


paste it into AppName\node_modules then rename it -> ionicons

Is there a way to set the max time it can be cached in vue.config.js? Cuz I did this example and seems like the cache of the zip codes and the pre cache is permanent. This is bad because when you update the website in firebase and you access it , it always show the last version of the website unless you clean the cache or you use incognito mode

if you get the following warning "export ‘ICON_PATHS’ was not found in ‘ionicons/icons’' this fixed it for me: npm install [email protected] --save-dev

great stuff
Could please create a tutorial series for react pwa aswell

E X C E L L E N T !!!


Can you realize a video on how to handle offline sync with firebase?

Hi Brad, can you make a tutorial Vue and ionic on how to authenticate

After Installation of @ionic/vue, I am getting issue:-

warning in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'

idk why but it always thows console error when i use "Vue.use(Ionic);" :/

export "ICON PATHS" was not found in "ionicons/icons" - Please HELP :(

a tutorial for react and ionic would be great!

Error: export "ICON PATHS" was not found in "ionicons/icons"

one of the best channel I always want to watch thanks brad

is it possible to do this into a WebAPK where you can add it to an android homescreen more naturally?

great video brad as usual. about the spaces in object you can use quotation marks like obj."... ..." i remember facing something like this. i thought i mention this so for once at least i can help out even if not exactly that helpful compared to your work. god bless and good job as usual.

Hi, you are always great in tutorials. I find them perfect to get a kick start. Can we get a pwa with react tutorial.

Awesome tutorial, thank you!

Thks Brad but also make pwa with react

How to use the Ionic router? Can't find anything on the docs.

how can be made ssr for this app ?

Brad it would be great if you enable the Join Membership button on your channel.

Flutter