Introducing the GitHub portfolio app

The main project of this chapter is a GitHub portfolio app. It is a PWA, which means it has all the features listed in the Basic theory on components and PWAs section of this chapter. These features are provided automatically by the @vue/cli-plugin-pwa plugin. We can add the code we need, to add the service workers and any other required configuration with one command. This way, we don't have to configure everything all by ourselves from scratch when we create our Vue project.

To get started with our app project, we will create it using Vite. We go into the folder where we want our project to be, and then run Vite to create the Vue 3 app project. To do this, we run the following commands with Node Package Manager (npm):

1. The first command, shown in the following code snippet, runs npm to install the Vue command-line interface (CLI) globally:

   npm install -g @vue/cli@next

2. We run the Vue CLI to create our Vue 3 project. Our project folder name is vue-example-ch2-github-app. The following command is needed to create the project folder with all the files and settings added so that we don't have to add them ourselves. This command goes to the project folder we just created and chooses the Vue 3 project when asked:

   npm vue create vue-example-ch2-github-app 

3. Then, we run the following command to run the development server so that we can see the project in the browser and refresh the app preview when we write our code:

   npm run serve

Alternatively, we can run the following commands with Yet Another Resource Negotiator (YARN):

1. We run yarn global add to install the Vue CLI globally, as follows:

   yarn global add @vue/cli@next

2. To create the Vue 3 project, we run the following command and choose the Vue 3 project when asked:

   yarn create vue-example-ch2-github-app

3. Then, we run the following command to run the development server so that we can see the project in the browser and refresh the app preview when we write our code:

   yarn serve

All the preceding commands are the same, as in they both create the project the same way; it's just a matter of which package manager we want to use to create our Vue 3 project. At this point, the project folder will have the required files for our Vue 3 project.

Our GitHub portfolio app is a progressive web app, and we can create this app easily with an existing Vue CLI plugin. Once we have created the project, we can start creating our Vue 3 PWA.