Book Image

Vue.js 3 By Example

By : John Au-Yeung
Book Image

Vue.js 3 By Example

By: John Au-Yeung

Overview of this book

With its huge ecosystem and wide adoption, Vue is one of the leading frameworks thanks to its ease of use when developing applications. However, it can get challenging for aspiring Vue.js developers to make sense of the ecosystem and build meaningful applications. This book will help you understand how you can leverage Vue effectively to develop impressive apps quickly using its latest version – Vue 3.0. The book takes an example-based approach to help you get to grips with the basics of Vue 3 and create a simple application by exploring features such as components and directives. You'll then enhance your app building skills by learning how to test the app with Jest and Vue Test Utils. As you advance, you'll understand how to write non-web apps with Vue 3, create cross-platform desktop apps with the Electron plugin, and build a multi-purpose mobile app with Vue and Ionic. You'll also be able to develop web apps with Vue 3 that interact well with GraphQL APIs. Finally, you'll build a chat app that performs real-time communication using Vue 3 and Laravel. By the end of this Vue.js book, you'll have developed the skills you need to build real-world apps using Vue 3 by working through a range of projects.
Table of Contents (10 chapters)

Serving the PWA

Now that we have built the app, we can serve it so that we can install it in our browser. Let's begin, as follows:

  1. To build the app, we run the following command:
    npm run build
  2. We can use the browser-sync package, which we install by running the following command:
    npm install –g browser-sync

    The preceding command will install a web server.

  3. We can go into the dist folder, which has the built files, and run browser-sync to serve the PWA.
  4. Now, to run the app, we need to get the GitHub authentication token from our GitHub account. If you don't have a GitHub account, then you will have to sign up for one.
  5. Once we have created an account, then we can get the token. To get the token, log in to your GitHub account.
  6. Go to
  7. Once the page is loaded, click on the Personal access tokens link.
  8. Click Generate new token to generate a token. Once it's created, copy the token down somewhere so that we can use it by entering it in our app.

    We should see something like this:

    Figure 2.3 – The screen for getting the token

    Figure 2.3 – The screen for getting the token

  9. Once you have the token, go back to the app we created, which is loaded in the browser.
  10. Enter the token into the GitHub Token input, click Save token, and then refresh the page. If there are any repositories and associated issues and comments, then they should show in the page.
  11. Once we are in the browser, we should see a plus (+) sign on the right side of the URL bar. This button lets us install the PWA.
  12. Once we install it, we should see it on the home screen. We can go to the chrome://apps URL to see the app we just installed, as shown in the following screenshot:
    Figure 2.4 – The GitHub repository listing in our PWA

    Figure 2.4 – The GitHub repository listing in our PWA

  13. If you're using Chrome or any other Chromium browser such as Edge, you can press F12 to open the developer console.
  14. Click on the Application tab and then the Service Workers link on the left side to let us test the service worker, as illustrated in the following screenshot:
    Figure 2.5 – The Service Workers section of the Application tab

    Figure 2.5 – The Service Workers section of the Application tab

  15. We can check the Offline checkbox to simulate how it acts when it is offline. Checking the Update on reload will reload the app with the latest data fetched when we refresh the page. The URL should be the same as the one your app is running on. This is the service worker that is registered by our GitHub PWA.
  16. The Unregister link will unregister the service worker. It should be re-registered when we run our app again.

We are now done with creating our progressive web app with Vue 3. We can install it with browsers and then use it like any other app on our device.