Using Vue.js to create a fully-featured PWA

Learn how to make your Vue.js app a PWA with a single line of code. Get a universal installation link. Send push notifications. Make your PWA work offline. Manage your service worker and app manifest.

4 min100% compatible
Vue.js Logo
Cover image for Using Vue.js to create a fully-featured PWA

Getting started with Vue.js & Progressier

  1. Illustration screenshot for Create a Progressier account

    1Create a Progressier account

    Click Get started at the top of this page, and select Vue in the dropdown menu. Then create a Progressier account if you don't have one yet.

  2. Illustration screenshot for Add the script tag to your HTML

    2Add the script tag to your HTML

    Add our script tag to the HTML of your Vue.js app before the closing </head> tag. The full snippet includes your App ID and is available in the dashboard after logging in.

  3. Illustration screenshot for Import our service worker file

    3Import our service worker file

    In the Progressier dashboard, download our service worker file. If your Vue.js app already has a service worker, you can instead import it using importScripts.

  4. Illustration screenshot for Install your PWA

    4Install your PWA

    Progressier makes your Vue.js installable across compatible devices and browsers (with custom instructions on iOS), generates an install page, and gives you access to PWA promotion widgets.

  5. Illustration screenshot for Send a push notification

    5Send a push notification

    Progressier prompts users to allow push notifications in compatible browsers, and enables you to send push notifications from our dashboard and/or server-side API. You can even connect your own user data to send personalized push notifications.

Which PWA features does Vue.js support?

Android Installation

Let users install your app on their Android device. It works exactly like a native app.

iOS Installation

Your PWA is installable on iOS and iPad OS. It will open in its own standalone window. Progressier shows users custom instructions.

Windows Installation

Make your app a standalone desktop app that open in its own window. Your PWA can be installed from Chrome and Edge.

macOS Installation

Progressier helps users add your Vue.js PWA to their Docks for quick access.

Chrome OS Installation

Enjoy native PWA support for your app on Chrome OS.

Install Page

An app-store like installation experience for your PWA — without the hassle of managing Google Play/App Store listings.

Original Domain Installation

Your Vue.js PWA can be installed from your existing domain.

Web App Manifest

Progressier generates a web app manifest for you based on your preferences automatically.

Service Worker

A service worker is a JavaScript file that runs in the browser continuously even when the page is not open. It's what allows push notifications to be delivered and resources to be cached intelligently. Progressier allows you to create, manage, customize your service worker without having to write code.

Cache Static Resources

Progressier lets you build caching strategies without writing code so you can easily cache resources and make them accessible offline.

100% Offline-Ready

If you have full control over all the resources required for your website to work, you can make your site work 100% offline in Progressier without writing a single line of code.

Push Campaigns

Send push notifications to up to 1,000,000 users in one go within the Progressier dashboard or via the API.

Personalized Notifications

Send notifications to any particular user manually or programmatically. All your need is their email, their user ID or any other information that identifies them in your system.

Connect User Data

Link user data like emails, names, status to push subscriptions, so you can easily notify someone from your product directly or from our dashboard.

In-App PWA Promotion

Promote installation of your PWA with a floating action button in the body of your app.

Offline Alerts

Show a custom alert when a user loses network connectivity.

Push Prompt on Standalone

Progressier asks users to allow notifications right after they've installed your app, which generally results in a higher subscription rate

Install & Push Analytics

See in real-time and track over time how users install your PWA and allow push notifications.

Programmatic PWA Creation

Create new Progressive Web Apps dynamically with our API on different domains or subdirectories.

Google Play & App Store Upload

Easily upload your app to Google Play or the App Store with our PWABuilder integration.

Why choose Vue.js and Progressier for your PWA?

Progressier automatically generates a service worker and app manifest for your Vue JS PWA. You also get access to a complete push notification solution, optimized PWA promotion widgets, and an iOS splash screen generator, as well as granular push and install analytics.

How long does it take to create a PWA with Vue JS?

With Progressier, creating a PWA with Vue.js takes 4 minutes or less.

Is Vue JS better than React for a PWA?

Both frameworks provide solid solutions for creating a PWA. Vue JS is slightly more accessible to PWA beginners.

Can I make a Vue JS PWA work offline?

Yes! With Progressier, you can configure caching strategies and make your Vue.js work completely offline.

What's the best caching strategy to use in a Vue.js PWA?

Stale-While-Revalidate is generally the best strategy to use for most use cases as it improves load times without the risk of users getting stuck with stale resources.

How can my Vue JS PWA send push notifications?

Progressier provides you with a solution for sending push notifications from your Vue.js without having to write a single line of code.

What are the requirements for creating a PWA with Vue?

You can create a PWA from your Vue.js app as long as it's hosted on domain secured by a SSL. Your Vue app must also have an app manifest and service worker with a listener to the fetch event.

When should I prompt users to install my Vue JS PWA?

You should ask users to install a PWA after they've displayed sufficient engagement with your app, e.g. after they signed up or placed an order.

Can I upload a Vue PWA to the app stores?

Yes! With Progressier and PWABuilder, you can upload your Vue.js PWA to Google Play and/or the Apple App Store in 5 minutes or less.

Your app here

Ready to turn your Vue.js app into a PWA?

Try our PWA builder free of charge for 14 days. No credit card required.

Get started See plans