Basic theory on components and PWAs
Before we begin with building our Vue app, let's first get familiar with components and PWA. Vue 3 lets us build frontend web apps with components. With them, we can divide our app into small, reusable parts that are composed together to make a big app. This composition is done by nesting. To make different parts of the app compose together, we can pass data between them. Components can be taken from libraries and can also be created by us.
A component consists of several parts; it includes a template, a script, and styles. The template is what is rendered on the screen. It has HyperText Markup Language (HTML) elements, directives, and components. Components and HTML elements can have props and event listeners added to them. Props are used to pass data from a parent component to a child component.
Event listeners let us listen to events emitted from a child component to a parent component. Events may be emitted with a payload, with data included in it. This enables us to have child component-to-parent component communication. With both things put together, we have a complete system to communicate between parent and child components.
Any non-trivial app will have multiple components that need to communicate with each other.
PWAs are special web apps that can be installed on the user's computer, and the browser manages these installed apps. They differ from regular web apps as they let us access some computer hardware natively. When we visit a PWA in our browsers, we can choose to install the PWA and can then reach our app from the app store.
PWAs don't require special bundling or distribution procedures. This means they are deployed just like any other web app to a server. Many modern browsers—such as Mozilla Firefox, Google Chrome, Apple Safari, and Microsoft Edge—support PWAs. This means that we can install the apps with them.
Special characteristics of PWAs include the ability to work for every user, regardless of browser choice. They are also responsive, which means they work on any device, such as desktop, laptop, tablet, or mobile devices. Initial loading is also fast since they are supposed to be cached on first load.
They are also supposed to work regardless of whether there's connectivity to the internet. Service workers run in the background to let us use PWAs offline or on low-quality networks. This is also another benefit of the caching available to PWAs.
Even though PWAs are run from the browser, they act like apps. They have app-like style interactions and navigation. Whatever is displayed is also always up to date, since the service worker runs in the background to update the data.
Security is a further important benefit of PWAs. They can only be served over HTTP Secure (HTTPS), so outsiders can't snoop on the connection. This way, we know the connection hasn't been tampered with.
Push notifications are also available with PWAs so that they can engage with the user and notify them of updates.
They can also be linked from a Uniform Resource Locator (URL), and a PWA doesn't require an installation process before we can use it—installation is strictly optional. When we install it, it provides a home screen icon on our browser so that we can click on it and start using it.
Vue 3 has a @vue/cli-plugin-pwa plugin to let us add PWA abilities into our Vue 3 project without doing any manual configuration. We just run one command and have all the files and configuration added for us automatically. With this plugin, we can develop our PWA with Vue 3, and the included service worker will run in production. Now that we have this out of the way, we are going to look at how to create reusable components.