Veröffentlicht von: Tom Scharlock Category: Video Wissen Tags: , , , , , , Kommentare 44

In diesem Projekt werden wir eine progressive Web-App mit Vue.js und Ionic 4 erstellen. Dazu verwenden wir das @ionic/vue-Paket und das @vue/pwa-Plugin. Code: Sponsor: Freelancer Bundle (Verwenden Sie “brad25” für 25% Rabatt) @ionic/vue Info: 💖 Werden Sie ein Patron: Zeigen Sie Unterstützung und erhalten Sie Vorteile! Website & Udemy-Kurse Folgen Sie Traversy Media: .

Kommentare (44)

  • SkywalkerWroc Antworten

    51:21 There's a small fix I had to apply for it to work. Regexp in this part is invalid (you can check it on
    Here's a corrected version of the line:
    urlPattern: new RegExp('^'),
    As you can see – it's missing escaping on the meaningful characters of the expression.

    1. Juni 2019 um 11:50
  • jakubkoje Antworten

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

    4. Juni 2019 um 20:56
  • Kavuma Herbert Antworten

    Thks Brad but also make pwa with react

    5. Juni 2019 um 10:40
  • Edgar Hugo Cheverier Aguilar Antworten

    Awesome tutorial, thank you!

    5. Juni 2019 um 23:33
  • Rajat shah Antworten

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

    6. Juni 2019 um 7:16
  • chawki challadia Antworten

    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.

    13. Juni 2019 um 9:01
  • rebelgusanos Antworten

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

    13. Juni 2019 um 12:37
  • Morley Tech TV Antworten

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

    26. Juni 2019 um 14:46
  • R6 anthonyR6 Antworten

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

    30. Juni 2019 um 19:54
  • Frederik Diekmann Antworten

    a tutorial for react and ionic would be great!

    30. Juni 2019 um 20:24
  • Ninz Embalsado Antworten

    export "ICON PATHS" was not found in "ionicons/icons" – Please HELP 🙁

    2. Juli 2019 um 9:32
  • Snow Fox Antworten

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

    8. Juli 2019 um 21:10
  • Gurmandeep singh Antworten

    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'

    9. Juli 2019 um 18:42
  • biansor almerol Antworten

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

    11. Juli 2019 um 4:01
  • Simo D'lo Mafuxwana Antworten

    I struggled with this error "Cannot convert undefined or null to object" error when I register @ionic/vue plugin. To fix, see this post

    16. Juli 2019 um 15:48
  • Mirko Tebaldi Antworten

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

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

    16. Juli 2019 um 22:18
  • saurabh jindal Antworten

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

    29. Juli 2019 um 9:04
  • Dan Carrera Antworten

    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

    2. August 2019 um 2:41
  • Daniel Silva Antworten

    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

    11. August 2019 um 14:04
  • teneriffatane Antworten

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

    copy the dist folder from [email protected] (this folder has the files that are missing)

    paste it into AppNamenode_modules then rename it -> ionicons

    24. August 2019 um 11:27
  • Dmitry Sharabin Antworten

    That was really useful! Thank you.

    23. September 2019 um 18:02
  • Emmanuel Aubrey Antworten

    At the time of writing this I experienced an error when I imported import '@ionic/core/css/ionic.bundle.css nothing broke it just wouldn't render anything. I found the answer to be simply to update the version of @ionic/vue

    You can just run npm install @ionic/[email protected] this is the latest version right now. The stable version currently is 0.0.4

    14. Oktober 2019 um 1:56
  • Ryan Ceasar Borromeo Antworten

    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;-)

    11. Dezember 2019 um 7:45
  • Kahlil Ashanti Antworten

    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.

    21. Dezember 2019 um 0:18
  • Gambriman Antworten

    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!

    3. Januar 2020 um 21:42
  • Jason Antworten

    Everybody knows 90210

    10. Januar 2020 um 16:29
  • Dann Astillero Antworten

    vue add @vue/pwa does not generate manifest.json 🙁

    19. Februar 2020 um 17:40
  • Quan Lâm Trường Antworten

    how does everyone find this course guys?

    21. März 2020 um 4:18
  • lauris skraucis Antworten

    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.

    2. Mai 2020 um 10:01
  • Mark Sahlgreen Antworten

    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

    11. Mai 2020 um 12:47
  • Александр Лихолетов Antworten

    Great tutorial!

    15. Mai 2020 um 8:04
  • WeatbixZ Antworten

    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?

    17. Juli 2020 um 4:50
  • Shanon Liew Antworten

    I love your Vue tutorials! Thank you!

    21. August 2020 um 4:05
  • Ziegfrid Gualberto Antworten

    Hi Brad,

    How does this caching work? if you requested the same url it will always fetch that cached data? what if the data changed on that cached data? will it still load the cached data? or the new updated data?

    8. Oktober 2020 um 1:46
  • scott mcmahon Antworten

    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?

    16. Oktober 2020 um 5:42
  • Arinjoy Kundu Antworten

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

    19. Oktober 2020 um 6:59
  • Bro Jenuel Antworten

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

    9. November 2020 um 1:37
  • Simo D'lo Mafuxwana Antworten

    I create ionic vue templates. Subscribe to get template and other ionic-vue updates in your inbox!

    18. November 2020 um 17:52
  • Md. Ruhul Amin Khan Antworten

    Awesome 🙂

    5. Januar 2021 um 19:17
  • yiichanne Antworten

    38:10 for deploy/hosting via firebase, 44:00 for pwa

    10. März 2021 um 20:54
  • Edwin Antworten


    30. April 2021 um 18:09
  • Divya Vishwakarma Antworten

    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.

    16. Mai 2021 um 15:01
  • Douglas Lindner Antworten

    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!

    9. Juni 2021 um 17:10

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.