Building a PWA with Vue.js

• vue-liquid-measurement-converter

  1 10 4.7 Vue

  The finished version of the Vue liquid measurements converter PWA for the LogRocket blog

Here’s the finished GitHub repo, and here’s my finished PWAPrompt component, specifically, if you’d like to yoink it for your own repurposing. Just be sure to adjust the code as needed.

• Vue.js

  381 206,901 7.9 TypeScript

  This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

  

Essentially, it’s an enhanced website! How? Unlike traditional websites, you can install a PWA on your device. You can even prompt users to install your PWA when they visit your site, as shown in this screenshot from Quina, my word game app, which is also a PWA (and also built with Vue):

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• pwa-module

  8 1,218 1.5 TypeScript

  Zero config PWA solution for Nuxt.js

  

Note that if your original project is built with Nuxt (a Vue meta-framework), you have a better-suited solution readily available in the Nuxt PWA module. Nuxt and its ecosystem of plugins are a bit much to tackle in the scope of this post, but the same PWA general principles we’ll cover here apply there, too. The difference is how the config options are entered. So, while the concepts translate, if you’re using Nuxt, I’ll refer you to the Nuxt PWA module docs for the details.

• Nuxt.js

  207 42,699 8.0 TypeScript

  Discontinued Nuxt is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue 3. [Moved to: https://github.com/nuxt/nuxt]

  

Note that if your original project is built with Nuxt (a Vue meta-framework), you have a better-suited solution readily available in the Nuxt PWA module. Nuxt and its ecosystem of plugins are a bit much to tackle in the scope of this post, but the same PWA general principles we’ll cover here apply there, too. The difference is how the config options are entered. So, while the concepts translate, if you’re using Nuxt, I’ll refer you to the Nuxt PWA module docs for the details.

• Visual Studio Code

  2,831 157,893 10.0 TypeScript

  Visual Studio Code

  

Now that we have our project set up, let’s open the project folder in VS Code (or your preferred text editor).

• vue-cli

  86 29,750 0.0 JavaScript

  🛠️ webpack-based tooling for Vue.js Development

  

Fortunately, there’s an easier way with Vue, thanks to Vue CLI!

Suggest a related project