Modern PWA with Vue-CLI 3 + Vuetify + Firestore + Workbox[Part 1]

Progressive Web Apps are a really good alternative to Native Apps because they don’t need to be installed and work fast, are reliable and keep the user engaged through push notifications.

Last year I followed this medium articles series where a PWA was made with Vue. Unfortunately the authors never finished the App and important topics such as “Implementing push notifications” were never touched.

In this tutorial we’re going to create a similar app “cropchien” (we’ll use dogs instead of cats). We are going to use even more modern tools like Vue-CLI 3 and Workbox to make a quality PWA.

Tutorial objective

The app will create post with pictures of dogs, upload pictures with the camera, work offline, and send push notifications to notify all the users when new post was created.

At the end of this article’s series the PWA should look like the following:

The tutorial will be split in several parts, that will be published successively:

[Part 1] Create a SPA project using Vue-CLI 3 and Vuetify plugin

[Part 2] Connect the App with an external API and Firestore to save data

[Part 3] Implement offline mode

[Part 4] Access device camera to take pictures

[Part 5] Implement Firebase push notifications

[Part 1] Create a SPA project using Vue-CLI 3 and Vuetify plugin

Let’s get started, first we need to install Vue-CLI 3 globally using the following command in the terminal:

npm install -g @vue/cli

For information about how to use Vue-CLI-3, visit the official documentation

Next create the project with the next line of code.

vue create cropchien

We’ll be getting the next menu.

Select “Manually select features” using the arrow keys and press enter. Then select the next features by pressing space bar and using arrow keys to move between options.

As you can see, we’ve selected Babel, PWA and Router options. Press enter to confirm.

Then you’ll be asked for vue-router history mode, select “No”:

And then select “In package.json” for Babel, PostCSS and ESLint config:

Finally you’ll be asked if you want to store this configuration for the future, select whatever you want.

After pressing enter the yarn install or npm install command will be executed automatically and when it finishes we’ll get a completed PWA project with Vue.js.

Now open the newly created cropchien folder with VSCode, you should see the next project files and directories.

Inside Visual Studio Code open the integrated terminal and write the next command to check the current project is working.

yarn serve

or npm run serve if you aren’t using yarn

Now stop the local server with Ctrl +C and then run the next command in the terminal to install Vuetify plugin.

vue add vuetify

select default configuration:

When it’s finished it will show you a message suggesting to review some changes in GIT.

Now you should be able to see the vuetify.js file inside the new plugins folder.

Run yarn serve in the terminal again.

If everything is ok you should see the next vuetify landing page:

Now you have everything to start with our Cropchien Project.

Configuring the manifest.json

Edit the manifest.json file located at public folder with the next code:

As you can see we have set up a lot of icon screen sizes for different devices, don’t worry. You don’t have to create all these sizes one by one. Instead you can create them with the help of this tool.

PWABuilder

To make things faster, take all icons from my cropchien repository in github.

Eder87rh/cropchien

Creating views and routing

We’re going to create our basic project’s views and routes, which are the following:

Home.vue— display dog pictures thread as a list of images

Detail.vue— display a specific dog image details

Post.vue — enables the user to post a new dog

First delete the views folder located in src and the HelloWorld.vue component in the components folder.

Then update de App.vue with this code:

Now create a Home.vue file in components folder and paste this code:

Create Details.vue in components folder and paste this:

And finally create Post.vue in components folder and paste this code:

Now we have all the components to show a very basic app, we just need to update the router.js file with this info:

Run yarn serve to watch the app in action

Congratulations! CropChien is ready to be converted in to a great PWA.

You’ve developed a very nice SPA quickly with Vue-CLI and vuetify but there is so much work to do.

In the next chapter we’ll be able to create new post, get data from the dog API and we’ll save the data with Google Cloud Firestore.

See you in the next chapter.