Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Vue.js 2 Design Patterns and Best Practices
Vue.js 2 Design Patterns and Best Practices

Vue.js 2 Design Patterns and Best Practices: Build enterprise-ready, modular Vue.js applications with Vuex and Nuxt

Arrow left icon
Profile Icon Halliday
Arrow right icon
S$12.99 S$52.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.5 (6 Ratings)
eBook Mar 2018 344 pages 1st Edition
eBook
S$12.99 S$52.99
Paperback
S$66.99
Subscription
Free Trial
Arrow left icon
Profile Icon Halliday
Arrow right icon
S$12.99 S$52.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.5 (6 Ratings)
eBook Mar 2018 344 pages 1st Edition
eBook
S$12.99 S$52.99
Paperback
S$66.99
Subscription
Free Trial
eBook
S$12.99 S$52.99
Paperback
S$66.99
Subscription
Free Trial

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Vue.js 2 Design Patterns and Best Practices

Proper Creation of Vue Projects

In this chapter, we'll be looking at how we can create maintainable Vue projects, and take advantage of the many tools and patterns available. If you currently aren't maximizing the use of these things within your development workflow, you may find that the majority of the concepts we discuss in this chapter are applicable to other technologies.

In this chapter, we will be looking at the following:

  • Vue devtools
  • Visual Studio Code extensions
  • TypeScript integration
  • Reactivity with RxJS

Visual Studio Code extensions

Our development environment is an important part of application development. When using Visual Studio Code to create Vue applications, the following extensions are recommended:

  • Vetur
  • Vue 2 Snippets

Let's take a look at both of these in more detail.

Vetur

Vetur is powered by the Vue Language Server and provides us with syntax highlighting, Emmet (for increased HTML/CSS workflow), snippets, linting, IntelliSense, and more. This greatly improves our development experience and is widely supported, with over 1,000 stars on GitHub. To install the extension, click the Extensions icon within Visual Studio Code and type Vetur; from here, you can select Install and it'll automatically be used...

Vue CLI

The Vue Command Line Interface (CLI) allows us to quickly scaffold new Vue projects with a variety of different template options. Currently, the template options available include technologies such as Webpack, Browserify, and Progressive Web Application features.

Sure, we could create our own Vue application and manually add tools such as Webpack, but this creates technical overhead in the sense that we have to learn, build, and maintain our configuration. The Vue CLI does this for us while maintaining a select set of official templates, but doesn't restrict us from modifying the generated Webpack configuration. All of this allows us to generate new unopinionated Vue projects.

To start using the Vue CLI, let's ensure we have it installed:

npm install vue-cli -g

We can then use the Vue init command to scaffold a new Vue project using the Webpack template:

vue...

VueJS devtools

Being able to accurately debug our application is an important part of our development workflow. In the previous chapter, we installed the VueJS devtools, and we'll be looking at using it in more detail within this section. Let's make a playground project:

# New project
vue init webpack-simple vue-devtools

# Change directory
cd vue-devtools

# Install dependencies
npm install

# Run application
npm run dev

We can then open up our developer console and navigate to the Vue tab. When we select App from within the components list, we can see the data object(s) and other information for this component. By default, we have the msg variable that we're then binding to within our template, and we can see this within our developer tools:

Inspecting a Vue instance

This goes both ways though - we could access the objects inside of this Vue instance with $vm0.$data, scoping...

TypeScript and Vue

You may have used TypeScript in the past, or you may be curious about how you can take advantage of the extra tooling TypeScript provides inside of your Vue projects. Why use TypeScript? A recent study by Gao et al found that TypeScript/static typing tools reduced committed bugs by 15% (https://goo.gl/XUTPf4).

If you've used Angular before, this syntax should make you feel right at home, as we'll be using decorators and ES2015 classes. Let's investigate how we can add TypeScript to a project built with the Vue CLI:

# Create a new Vue project
vue init webpack-simple typescript-vue

# Change directory
cd typescript-vue

# Install dependencies
npm install

You should get the following output on the Terminal:

If we navigate to our project directory and run npm install as per the instructions, we then need to install the TypeScript loader and edit our Webpack...

RxJS and Vue

If you come from an Angular background, you'll most likely feel right at home with at least the basic concepts of RxJS. This means we're usually dealing with things such as Observables, Subjects, and a variety of operators. If you haven't used them before, not to worry - we'll be investigating what RxJS is, and why we'd want to use it within Vue.

What is RxJS?

If we look at the RxJS documentation, we're greeted with the following definition: "ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences" (http://reactivex.io/intro.html). At first glance, this is not exactly a description that makes us feel comfortable using this...

Summary

In this chapter, we looked at how we can take advantage of the Vue CLI to scaffold new Vue projects with appropriate bundling configurations and ES2015 support. We've seen that not only does this give us extra power, but it also saves us a significant amount of time in the long run. We don't have to remember how to create a Webpack or Babel configuration, as this is all handled for us by the starter templates; but even still, if we want to add extra configuration options, we can.

We then looked at how we can implement TypeScript with Webpack and the ts-loader, as well as taking advantage of common TypeScript and Vue patterns with the property decorator(s). This allows us to take advantage of core tooling and help reduce bugs in our code.

Finally, we also implemented RxJS and Vue-Rx in our application to take advantage of the Observable pattern. If you're...

Proxying

So far, you may have interacted with a Vue application and thought to yourself: How does this work the way it does? Before looking into how Vue.js handles this, let's have a look at how it works within JavaScript.

How 'this' works within JavaScript

Within JavaScript, this has varying contexts that range from the global window context to eval, newable, and function contexts. As the default context for this relates to the global scope, this is our window object:

/**
* Outputting the value of this to the console in the global context returns the Window object
*/
console.log(this);

/**
* When referencing global Window objects, we don't need to refer to them with this, but if we do, we get the same behavior...

Visual Studio Code extensions


Our development environment is an important part of application development. When using Visual Studio Code to create Vue applications, the following extensions are recommended:

  • Vetur
  • Vue 2 Snippets

Let's take a look at both of these in more detail.

Vetur

Vetur is powered by the Vue Language Server and provides us with syntax highlighting, Emmet (for increased HTML/CSS workflow), snippets, linting, IntelliSense, and more. This greatly improves our development experience and is widely supported, with over 1,000 stars on GitHub. To install the extension, click the Extensions icon within Visual Studio Code and type Vetur; from here, you can select Install and it'll automatically be used throughout your project(s):

Installing Vetur

This then gives us access to snippets such as scaffold, which generates a new blank template, script, and style object(s) for us to use within our Vue components:

Scaffolding a new Vue project

Vue 2 Snippets

Snippets are an important part of application...

Vue CLI


The Vue Command Line Interface (CLI) allows us to quickly scaffold new Vue projects with a variety of different template options. Currently, the template options available include technologies such as Webpack, Browserify, and Progressive Web Application features.

Sure, we could create our own Vue application and manually add tools such as Webpack, but this creates technical overhead in the sense that we have to learn, build, and maintain our configuration. The Vue CLI does this for us while maintaining a select set of official templates, but doesn't restrict us from modifying the generated Webpack configuration. All of this allows us to generate new unopinionated Vue projects.

To start using the Vue CLI, let's ensure we have it installed:

npm install vue-cli -g

We can then use the Vue init command to scaffold a new Vue project using the Webpack template:

vue init webpack-simple my-vue-project

On entering the preceding command we should get the following as shown on the Terminal:

Creating...

VueJS devtools


Being able to accurately debug our application is an important part of our development workflow. In the previous chapter, we installed the VueJS devtools, and we'll be looking at using it in more detail within this section. Let's make a playground project:

# New project
vue init webpack-simple vue-devtools

# Change directory
cd vue-devtools

# Install dependencies
npm install

# Run application
npm run dev

We can then open up our developer console and navigate to the Vue tab. When we select App from within the components list, we can see the data object(s) and other information for this component. By default, we have the msg variable that we're then binding to within our template, and we can see this within our developer tools:

Inspecting a Vue instance

This goes both ways though - we could access the objects inside of this Vue instance with $vm0.$data, scoping this to msg. To view this within the console, selecting <Root> then <App> will display the msg0;within...

TypeScript and Vue


You may have used TypeScript in the past, or you may be curious about how you can take advantage of the extra tooling TypeScript provides inside of your Vue projects. Why use TypeScript?A recent study by Gao et al found that TypeScript/static typing tools reduced committed bugs by 15% (https://goo.gl/XUTPf4).

If you've used Angular before, this syntax should make you feel right at home, as we'll be using decorators and ES2015 classes. Let's investigate how we can add TypeScript to a project built with the Vue CLI:

# Create a new Vue project
vue init webpack-simple typescript-vue

# Change directory
cd typescript-vue

# Install dependencies
npm install

You should get the following output on the Terminal:

If we navigate to our project directory and run npm install as per the instructions, we then need to install the TypeScript loader and edit our Webpack configuration. This allows us to load .ts files inside of the project, and because we've used the webpack-simple template...

RxJS and Vue


If you come from an Angular background, you'll most likely feel right at home with at least the basic concepts of RxJS. This means we're usually dealing with things such as Observables, Subjects, and a variety of operators. If you haven't used them before, not to worry - we'll be investigating what RxJS is, and why we'd want to use it within Vue.

What is RxJS?

If we look at the RxJS documentation, we're greeted with the following definition: "ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences" (http://reactivex.io/intro.html). At first glance, this is not exactly a description that makes us feel comfortable using this within our projects.

RxJS assists us in using reactive programming principles inside of our application, often referred to as a more declarative style rather than imperative. When we talk about an imperative programming style, we're usually telling the computer the exact steps of how to do a particular task. A...

Summary


In this chapter, we looked at how we can take advantage of the Vue CLI to scaffold new Vue projects with appropriate bundling configurations and ES2015 support. We've seen that not only does this give us extra power, but it also saves us a significant amount of time in the long run. We don't have to remember how to create a Webpack or Babel configuration, as this is all handled for us by the starter templates; but even still, if we want to add extra configuration options, we can.

We then looked at how we can implement TypeScript with Webpack and the ts-loader, as well as taking advantage of common TypeScript and Vue patterns with the property decorator(s). This allows us to take advantage of core tooling and help reduce bugs in our code.

Finally, we also implemented RxJS and Vue-Rx in our application to take advantage of the Observable pattern. If you're interested in using RxJS inside of your projects, this is a good starting point for future integrations.

In the next chapter, we're...

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • • Craft highly modular applications by exploring design patterns and the component architecture of Vue.js
  • • Enforce a Flux-like application architecture in your Vue.js applications with Vuex
  • • Easy-to-follow examples that can be used to create reusable code and extensible designs

Description

Vue.js 2 Design Patterns and Best Practices starts by comparing Vue.js with other frameworks and setting up the development environment for your application, and gradually moves on to writing and styling clean, maintainable, and reusable Vue.js components that can be used across your application. Further on, you'll look at common UI patterns, Vue form submission, and various modifiers such as lazy binding, number typecasting, and string trimming to create better UIs. You will also explore best practices for integrating HTTP into Vue.js applications to create an application with dynamic data. Routing is a vitally important part of any SPA, so you will focus on the vue-router and explore routing a user between multiple pages. Next, you'll also explore state management with Vuex, write testable code for your application, and create performant, server-side rendered applications with Nuxt. Toward the end, we'll look at common antipatterns to avoid, saving you from a lot of trial and error and development headaches. By the end of this book, you'll be on your way to becoming an expert Vue developer who can leverage design patterns to efficiently architect the design of your application and write clean and maintainable code.

Who is this book for?

This book is for Vue developers who are familiar with framework design principles and utilize commonly found design patterns in developing web applications.

What you will learn

  • • Understand the theory and patterns of Vue.js
  • • Build scalable and modular Vue.js applications
  • • Take advantage of Vuex for reactive state management
  • • Create single page applications with vue-router
  • • Use Nuxt for FAST server-side rendered Vue applications
  • • Convert your application to a Progressive Web App (PWA) and add ServiceWorkers and offline support
  • • Build your app with Vue.js by following best practices and explore the common anti-patterns to avoid

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Mar 14, 2018
Length: 344 pages
Edition : 1st
Language : English
ISBN-13 : 9781788831017
Languages :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Mar 14, 2018
Length: 344 pages
Edition : 1st
Language : English
ISBN-13 : 9781788831017
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total S$ 208.97
Vue.js 2 Design Patterns and Best Practices
S$66.99
Full-Stack Vue.js 2 and Laravel 5
S$66.99
Vue.js 2.x by Example
S$74.99
Total S$ 208.97 Stars icon
Banner background image

Table of Contents

13 Chapters
Vue.js Principles and Comparisons Chevron down icon Chevron up icon
Proper Creation of Vue Projects Chevron down icon Chevron up icon
Writing Clean and Lean Code with Vue Chevron down icon Chevron up icon
Vue.js Directives Chevron down icon Chevron up icon
Secured Communication with Vue.js Components Chevron down icon Chevron up icon
Creating Better UI Chevron down icon Chevron up icon
HTTP and WebSocket Communication Chevron down icon Chevron up icon
Vue Router Patterns Chevron down icon Chevron up icon
State Management with Vuex Chevron down icon Chevron up icon
Testing Vue.js Applications Chevron down icon Chevron up icon
Optimization Chevron down icon Chevron up icon
Server-Side Rendering with Nuxt Chevron down icon Chevron up icon
Patterns Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.5
(6 Ratings)
5 star 33.3%
4 star 16.7%
3 star 16.7%
2 star 33.3%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by




thepowderriverfarrier Apr 06, 2018
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Just bought the book and haven't read it all yet. Why five stars? Paul has consistently provided outstanding tutorials on line. His tutorials are clear, concise and to the point without adding unnecessary fluff or showboating. So there's no reason to think his book would be any different. The folks from GitLab have switched to Vue and Paul's been on the leading edge of training so this has to be a useful book.
Amazon Verified review Amazon
jaclynn Jun 13, 2018
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I purchased this book directly from Packt Publishing because I had some credit with them. While I have several books on Vue, this is the one I refer to the most. The author is concise which I appreciate. I understand the what & why of best practices, just not how to translate them into Vue. This book is perfect if you need to build an app in Vue and you're pressed for time. Every page contains valuable information, and it's delivered almost in checklist format, which is my personal favorite way to digest technical material.
Amazon Verified review Amazon
LJ Aug 14, 2018
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
Covers basic Vue. Not much better than Vue site. The code to pull down and try is the most useful part.
Amazon Verified review Amazon
Marten Stockenberg May 10, 2019
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
Für Anfänger besser geeignet als für fortgeschrittene, da die erste Hälfte des Buches auf die Grundlage eingeht. Ab der zweiten Hälfte würde es spannend. Nur ist hält das Buch nicht ganz was der Titel verspricht. Der Parteien und best practice Teil ist sehr klein. Daher guckt es euch vorher an, meistens war die doc akurater.
Amazon Verified review Amazon
Anonyme Jan 17, 2021
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
Si vous cherchez a vous former a VueJS sans deja connaitre AngularJS, passez votre chemin. Ce livre fait l'hypothese que tout le monde connait deja AngularJS et y fait constamment des references pour expliquer les differences entre les deux framework, avec comme objectif plus ou moins volontaire de precher les bienfaits de VueJS vs. AngularJS.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.