Book Image

Vue.js 2 Web Development Projects

Book Image

Vue.js 2 Web Development Projects


Overview of this book

Do you want to make your web application amazingly responsive? Are you unhappy with your app's performance and looking forward to trying out ways to make your app more powerful? Then Vue.js, a framework for building user interfaces, is a great choice, and this book is the ideal way to put it through its paces. This book's project-based approach will get you to build six stunning applications from scratch and gain valuable insights in Vue.js 2.5. You'll start by learning the basics of Vue.js and create your first web app using directives along with rich and attractive user experiences. You will learn about animations and interactivity by creating a browser-based game. Using the available tools and preprocessor, you will learn how to create multi-page apps with plugins. You will create highly efficient and performant functional components for your app. Next, you will create your own online store and optimize it. Finally, you will integrate Vue.js with the real-time Meteor library and create a dashboard showing real-time data. By the end of this book you will have enough skills and will have worked through enough examples of real Vue.js projects to create interactive professional web applications with Vue.js 2.5.
Table of Contents (15 chapters)

Complementary topics

In this section, we will cover a few more topics that can be useful for bigger apps.

Internationalization and code-splitting

If the app is to be used by people in different countries, it should be translated to be more user-friendly and appealing. To localize the texts of the app, you can use the recommended vue-i18n package:

npm i -S vue-i18n

Using vue-i18n, we will add a link in the AppFooter component to a new page where the user can select the language. Only the link and this page will be translated, but you can translate more parts of the app if you wish. vue-i18n works by creating a i18n object from it with the translated messages and injecting it into the Vue app.

  1. In the src/plugins.js file, install the new plugin into Vue:
      import VueI18n from 'vue-i18n'

      // ...

  1. Let's create a new folder called i18n in the project directory. Download the locales folder (