Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag Germany
Country selected
country flag Slovakia
Country selected
country flag Canada
Country selected
country flag Brazil
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag Norway
Country selected
country flag Chile
Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Spain
Country selected
country flag South Korea
Country selected
country flag Ecuador
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Switzerland
Country selected
country flag Indonesia
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag New Zealand
Country selected
country flag Austria
Country selected
country flag Turkey
Country selected
country flag France
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Malaysia
Country selected
country flag South Africa
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag Australia
Country selected
country flag Japan
Country selected
country flag Russia
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Home > Web Development > Design Patterns > Vue.js 2 Design Patterns and Best Practices
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
$48.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.5 (6 Ratings)
Paperback Mar 2018 344 pages 1st Edition
eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Halliday
Arrow right icon
$48.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.5 (6 Ratings)
Paperback Mar 2018 344 pages 1st Edition
eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
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

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

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

Vue.js 2 Design Patterns and Best Practices

Vue.js Principles and Comparisons

In this chapter, we'll be looking at why Vue is an important web development framework, as well as looking at setting up our development environment. If we're looking to use Vue for our next project, it's important we realize the implications, time investment, and learning curve when doing so. You'll have considered how Vue shapes up to other frontend development projects, as well as creating your first application with Vue.

In summary, we'll be considering the following points:

  • Downloading the book prerequisites
  • Understanding of where Vue fits into a frontend framework
  • Why you should consider using Vue as the framework for your next project
  • Investigation of how flexible Vue is and its role in mobile development

Prerequisites

Although you could develop Vue applications without Node, we'll be using Node.js throughout this book to manage dependencies and interact with the Vue Command Line Interface (CLI). This allows us to bootstrap projects quicker and gives us a better development experience as we can use ECMAScript 2015 by default. Let's have a quick refresher on setting up your development environment.

Windows

Installing Node for Windows is as simple as visiting https://nodejs.org and downloading the latest version. Ensure that when following the installation steps, Add to PATH is selected as this will allow us to access node commands within our Terminal.

Once you've done that, check your Node installation works by typing node -v and npm -v. If you get two version numbers back (that is, one for each), then you're ready to go ahead with the rest of the book!

Mac

Installing Node for Mac involves a little more work than simply downloading the installer from the Node website. While it is possible to use the installer from https://nodejs.org,it is not advised due to the requirement of sudo.

If we did it this way, we'd have to prefix all of our npm commands with sudo and this can leave our system vulnerable to potential scripting attacks and is inconvenient. Instead, we can install Node via the Homebrew package manager and we can then interact with npm without worrying about having to run things as sudo.

Another great thing about using Homebrew to install Node is that it's automatically added to our PATH. This means we'll be able to type node commands without having to fiddle around with our environment files.

Installing Node via Homebrew

The quickest way to get Homebrew is to visit http://brew.sh and get hold of the installation script. It should look a little something like this:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Simply paste that into your Terminal and it'll download the Homebrew package manager to your Mac. We can then use brew install node to install Node on our system without any worries.

Once you've done that, check your Node installation works by typing node -v and npm -v. If you get two version numbers back (that is, one for each), then you’re ready to go ahead with the rest of the book!

In order to manage the different Node versions, we could also install the Node Version Manager (NVM). Do note however that this is currently only supported by Mac at present and not Windows. To install NVM, we can use Homebrew like so:

--use Brew to install the NVM
brew install nvm

--File directory
mkdir ~/.nvm

--Install latest version
nvm install --lts

--Ensure latest version is used
nvm use node

--Remember details across sessions
nano ~/.bash_profile

--Execute in every session
export NVM_DIR="$HOME/.nvm"
  . "$(brew --prefix nvm)/nvm.sh"

Editor

A variety of editors can be used, such as Visual Studio Code, Sublime Text, Atom, and WebStorm. I recommend Visual Studio Code (https://code.visualstudio.com) as it has a frequent release cycle and a wealth of Vue extensions that we can use to improve our workflow.

Browser

We will be using Google Chrome to run our project(s) as this has an extension named Vue devtools that is instrumental to our development workflow. If you do not use Google Chrome, ensure your browser has the same Vue devtools extension that is available for usage.

Installing the Vue devtools

Head over to the Google Chrome Extensions store and download Vue.js devtools (https://goo.gl/Sc3YU1). After installing this, you'll then have access to the Vue panel within your developer tools. In the following example, we're able to see the data object inside of our Vue instance:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-     
  scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue.js</title>
</head>
<body>
  <div id="app"></div>
  <script src="http://unpkg.com/vue"></script>
  <script>
   Vue.config.devtools = true
   new Vue({
     el: '#app',
     data: {
       name: 'Vue.js Devtools',
       browser: 'Google Chrome'
     },
     template: `
      <div>
        <h1> I'm using {{name}} with {{browser}}</h1>
      </div>
     `
   });
  </script>
</body>
</html>

If we then head over to our browser and open up the devtools we can see that Vue has been detected and that our message has outputted on to the screen:

We'll be using this throughout the book to gain extra insight into our applications. Do be aware that the developer tools will only recognize your Vue project if it is served on a local server.

Vue CLI

To take advantage of all of the features of Vue, we'll be using Vue CLI. This allows us to create projects with various starter templates with appropriate bundling/transpilation configurations. Type the following into your Terminal ensuring Node is installed:

$ npm install vue-cli -g

This sets us up for the future sections as using starter templates significantly empowers our workflow.

How Vue.js compares

This book seeks to outline how to best structure your Vue applications with common development patterns, best practices, and anti-patterns to avoid.

Our journey starts by taking a look at how Vue shapes up to other common projects, and if you measure your frameworks by GitHub stars, Vue is clearly a future winner. According to https://bestof.js.org, in 2017 it currently measures at 114 stars per day in comparison to React's 76 and Angular's 32.

Framework discussion when talking about modern web development technologies is an interesting one. Very rarely do you find a true, unbiased comparison... but that's fine! It's not about which framework or library is best, but rather what's best for your team, project goals, consumers, and hundreds of other variables. As a Vue developer, you're likely a person that wants to build reactive web applications with a simple, easy-to-use API.

It's this adaptable, easy-to-use API that makes Vue pleasant to work with, and perhaps one of the strongest points of Vue is the simple, focused documentation. It has a significantly low barrier to entry: simply add a script file from a CDN, initialize a new Vue instance... and you're away! Granted, there's much more to Vue than this, but in contrast to some fully fledged frameworks such as Angular, you'd be forgiven for thinking it's that easy.

Vue uses templates, declarative bindings, and a component-based architecture to separate concerns and make projects easier to maintain. This becomes especially important when considering which framework to use inside of an enterprise. Usually, this is where projects such Angular shine as it's ability to enforce standards across the entire project.

We've established it's easy to use, but Vue is quite young in comparison to its competitors... how do we know it's not all hype? Is it being used in production by anyone? It certainly is! GitLab recently wrote an article about why they chose Vue.js (https://about.gitlab.com/2016/10/20/why-we-chose-vue/), and the primary benefits they cited were ease of use, less code, and fewer assumptions. Other companies such as Laravel, Nintendo, Sainsbury's and Alibaba are all following this route and even companies such as Rever Shine rewrote their web client from Angular 2.x to Vue 2.x (https://medium.com/reverdev/why-we-moved-from-angular-2-to-vue-js-and-why-we-didnt-choose-react-ef807d9f4163).

It's not just public – facing web applications that are taking advantage of Vue.js—NativeScript Sidekick (https://www.nativescript.org/blog/announcing-the-nativescript-sidekick-public-preview), a project focused on improving the NativeScript development experience, is built with Electron and Vue.js.

If we gain some insights from the State of JavaScript survey (http://2016.stateofjs.com/2016/frontend/) by Sacha Greif (https://twitter.com/SachaGreif) and Michael Rambeau (http://michaelrambeau.com/), we can see that a whopping 89% of people used Vue before and want to use it again. Other libraries such as React have similar satisfaction rates at 92%, but Angular 2 and onwards didn't see anywhere near as much love, with 65% wanting to use it again:

What other options are available to us as frontend developers? How do they shape up to Vue? Let's start with React.

React

React is a JavaScript library developed and maintained by Facebook, and is largely the closest comparison to Vue as their goals are very similar. Like Vue, React is component based and takes advantage of Virtual DOM concepts. This allows for performant rendering of DOM nodes, as a different algorithm is used to determine which parts of the DOM have changed and how best to render/update them on change.

When it comes to templates, React uses JSX to render items on the screen. It takes the more verbose way of creating DOM elements with React.createElement and simplifies it like so:

This is how it will look without JSX:

React.createElement</span>( MyButton, {color: 'red', shadowSize: 5}, 'Click Me' )

Here is how it will look with JSX. As you can see, the two appear very different from one another:

<MyButton color="red" shadowSize={5}>
 Click Me
</MyButton>

For newer developers, this adds a slight learning overhead when compared to Vue's simple HTML template, but it is also what gives React its declarative power. It has a state management system using setState(), but also has compatibility with third-party state containers such as Redux and MobX. Vue also has similar capabilities with the Vuex library, and we'll be looking at this in further detail in later sections of this book.

One of the common recent concerns of using React is the BSD + Patents license agreement, something to keep in mind if you're part of an enterprise. Due to this license, Apache recently declared that no Apache software products will use React. Another example of this is the announcement by Wordpress.com that they're no longer using React for their Gutenberg project (https://ma.tt/2017/09/on-react-and-wordpress/). This doesn't necessarily mean that you shouldn't use React in your projects, but is worth pointing out nonetheless.

Some concerned developers elect to use alternatives such as Preact but more recently Vue.js, as it meets a lot of the goals that React developers are looking for when developing applications. To that end, Microsoft (http://dev.office.com/fabric#/components), Apple (https://developer.apple.com/documentation), and countless other companies have products released with React – make of that what you will.

Angular

Angular is an opinionated JavaScript framework developed and maintained by Google. At the time of writing, it's currently approaching version 5 and offers a structured standards-based approach to web development. It uses TypeScript to enforce type safety and ECMAScript 2015 > support.

In comparison to Angular, Vue looks to enforce a smaller set of constraints and allows the developer more choice. One of Angular's core competencies is TypeScript everywhere. Most developers that came from Angular.js were hearing about TypeScript for the first time when Angular 2 was announced, and I noticed a fair amount of backlash because of the need to "learn a new language". The thing is, JavaScript is TypeScript and the value of increased tooling (autocompletion, refactoring, type safety, and much more) cannot be overlooked.

This is especially true when it comes to working on enterprise projects as the onboarding challenge gets harder with increased project complexity and team size. With TypeScript, we're able to better reason about the relationships between our code at scale. It's this structured development experience that is the prime strength of Angular. This is why the Angular team chose TypeScript as the primary development tool. The benefits of TypeScript are not limited to Angular; we'll be looking at how we can integrate Vue with TypeScript to gain these same benefits later on in the book.

Are there any drawbacks to using Angular as a development framework? Not necessarily. When we're comparing it to Vue, the onboarding experience is vitally different.

Mobile development

When it comes to developing mobile applications, projects such as Angular and React are great choices for developing mobile-first applications. The success of the NativeScript, React Native, and Ionic Framework projects have boosted the significant popularity of these frameworks. For instance, Ionic Framework currently has more stars than Angular on GitHub!

Vue is making waves in this area with projects such as NativeScript Vue, Weex, and Quasar Framework. All of the listed projects are relatively new, but it only takes one to truly spike the popularity of Vue in production even further. Using NativeScript Vue as an example, it only takes 43 lines of code to create a cross-platform mobile application that connects to a REST API and displays the results on screen. If you'd like to follow along with this yourself, run:

# Install the NativeScript CLI
npm install nativescript -g

# New NativeScript Vue project
tns create NSVue --template nativescript-vue-template

# Change directory
cd NSVue

# Run on iOS
tns run ios

Then, we can place the following inside of our app/app.js:

const Vue = require('nativescript-vue/dist/index');
const http = require('http');
Vue.prototype.$http = http;

new Vue({
    template: `
    <page>
        <action-bar class="action-bar" title="Posts"></action-bar>
        <stack-layout>
            <list-view :items="posts">
                <template scope="post">
                    <stack-layout class="list">
                        <label :text="post.title"></label>
                        <label :text="post.body"></label>
                    </stack-layout>
                </template>
            </list-view>
        </stack-layout>
    </page>
    `,    
    data: {
        posts: []
    },
    created(args) {
        this.getPosts();
    },
    methods: {
        getPosts() {
            this.$http
                .getJSON(`https://jsonplaceholder.typicode.com/posts`)
                .then(response => {
                    this.posts = response.map(
                        post => {
                            return {
                                title: post.title,
                                body: post.body
                            }
                        }
                    )
                });
        }
    }
}).$start();

If we then run our code, we can see a list of posts. You'll notice that our Vue code is declarative, and we have the power of larger frameworks at our disposal with much less code:

Server-Side Rendering (SSR)

Server-Side Rendering allows us to take our frontend JavaScript application and render it to static HTML on the server. This is important as it allows us to significantly speed up our application as the browser only has to parse the critical HTML/CSS. Maximizing performance is a key component of modern day web applications and the expectation continues to grow with progressive web applications and projects such as AMP. Both React, Angular and Vue are capable of SSR using a variety of different patterns.

Let's take a look at how we can achieve a simple Server-Side rendered Vue application:

# Create a new folder named vue-ssr:
$ mkdir vue-ssr
$ cd vue-ssr

# Create a new file named server.js
$ touch server.js

# Install dependencies
$ npm install vue vue-server-renderer express

Inside server.js, we can create a new Vue instance and use the Vue renderer to output the content of our instance as an HTML:

const Vue = require("vue");
const server = require("express")();
const renderer = require("vue-server-renderer").createRenderer();

server.get("*", (req, res) => {
  const app = new Vue({
    data: {
      date: new Date()
    },
    template: `
    <div>
    The visited time: {{ date }}
    </div>`
  });

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end("Internal Server Error");
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `);
  });
});

server.listen(8080);

To run the application, type the following in the Terminal:

$ node server.js

We can then open this in our browser at http://localhost: 8080 and we'd see the current date and time on screen. This is a simple example but we were able to see our application rendered using the vue-server-renderer. Notice how we're not defining a target element to render content within our Vue instance; this is handled by the renderer.renderToString function.

You'll also notice that we have the data-server-rendered="true" attribute on our DOM node, which isn't present on a client-side rendered Vue application. This allows us to hydrate our client-side instance with our server-side instance, something we'll be looking at more detail in the later chapter(s) on Nuxt (https://nuxtjs.org/).

Conclusion

The choice of web framework in the enterprise is always going to be dependent on the goals of your project, team, and organizational priorities. No one framework is the correct choice, because optimal means different things depending on the context. Each framework or library has its own unique benefits, drawbacks, and priorities. If your priority is to create web applications quickly and at scale, Vue can compete with the other market solutions.

Vue is feature rich, declarative, and highly legible. Even though it's a simplistic framework, the declarative nature of Vue allows us to get up and running at blazing fast speed without having to worry about overly complex patterns.

Summary

In this chapter, we looked at how we can set up our development environment and how Vue is being used in many products throughout the industry. We've learned that Vue is a simple, yet powerful frontend development framework. As well as this, we've considered how Vue shapes up when compared to other popular projects, such as Angular and React. We've also looked at how Vue works with other technologies, such as NativeScript, to create cross-platform native mobile applications. Finally, we've investigated SSR at a high level and set the stage for chapters to come. Hopefully, by now you're convinced that Vue is worth learning, and you're looking forward to taking advantage of all it has to offer!

In the next chapter, we'll be looking at the Vue CLI and how to take advantage of tools such as Webpack to create our Vue projects. As well as this, we'll look at how to take advantage of static types and tooling with TypeScript and reactive observable patterns with RxJS within Vue.

Left arrow icon

Page 1 of 4

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
Estimated delivery fee Deliver to Russia

Economy delivery 10 - 13 business days

$6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

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 : 9781788839792
Category :
Web Development
Languages :
JavaScript
Concepts :
Design Patterns
Tools :
Vue

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
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

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Russia

Economy delivery 10 - 13 business days

$6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Publication date : Mar 14, 2018
Length: 344 pages
Edition : 1st
Language : English
ISBN-13 : 9781788839792
Category :
Web Development
Languages :
JavaScript
Concepts :
Design Patterns
Tools :
Vue

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
START FREE TRIAL
BUY NOW
$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 $5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
$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 $5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

Vue.js 2.x by Example
Vue.js 2.x by Example
Read more
Dec 2017 412 pages
Full star icon 5 (2)
eBook
eBook
  • eBook eBook $29.99
  • Paperback Paperback $54.99
$29.99 $43.99
$54.99
Full-Stack Vue.js 2 and Laravel 5
Full-Stack Vue.js 2 and Laravel 5
Read more
Dec 2017 376 pages
Full star icon 4.5 (15)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $48.99
$27.98 $39.99
$48.99
Vue.js 2 Design Patterns and Best Practices
Vue.js 2 Design Patterns and Best Practices
Read more
Mar 2018 344 pages
Full star icon 3.5 (6)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $48.99
$27.98 $39.99
$48.99
Stars icon
Total $ 152.97
Vue.js 2.x by Example
$54.99
Full-Stack Vue.js 2 and Laravel 5
$48.99
Vue.js 2 Design Patterns and Best Practices
$48.99
Total $ 152.97 Stars icon
Banner background image

Table of Contents

13 Chapters
Vue.js Principles and Comparisons Chevron down icon Chevron up icon
Vue.js Principles and Comparisons
Prerequisites
How Vue.js compares
Summary
Proper Creation of Vue Projects Chevron down icon Chevron up icon
Proper Creation of Vue Projects
Visual Studio Code extensions
Vue CLI
VueJS devtools
TypeScript and Vue
RxJS and Vue
Summary
Proxying
Data properties
Computed properties
Watched properties
Lifecycle hooks
Vue.js and the Virtual DOM
Summary
Writing Clean and Lean Code with Vue Chevron down icon Chevron up icon
Writing Clean and Lean Code with Vue
Proxying
Data properties
Computed properties
Watched properties
Lifecycle hooks
Vue.js and the Virtual DOM
Summary
Vue.js Directives Chevron down icon Chevron up icon
Vue.js Directives
Model
Iteration with v-for
Bindings
DOM events and v-on
Conditionally showing DOM elements
Filters
Summary
Secured Communication with Vue.js Components Chevron down icon Chevron up icon
Secured Communication with Vue.js Components
Your first Vue component
Component communication
Event Bus
Slots
Summary
Creating Better UI Chevron down icon Chevron up icon
Creating Better UI
Animations
CSS animations
Transitions
Form validation
Render/functional components
Summary
HTTP and WebSocket Communication Chevron down icon Chevron up icon
HTTP and WebSocket Communication
HTTP
Real-time chat application with Node and Socket.io
Summary
Vue Router Patterns Chevron down icon Chevron up icon
Vue Router Patterns
Single Page Applications
Using the router
An SPA project
Summary
State Management with Vuex Chevron down icon Chevron up icon
State Management with Vuex
What is Vuex?
Using Vuex
Vuex and Vue devtools
Modules and scalability
Summary
Testing Vue.js Applications Chevron down icon Chevron up icon
Testing Vue.js Applications
Why testing?
Unit testing
Using Wallaby.js for a better testing experience
Summary
Optimization Chevron down icon Chevron up icon
Optimization
Progressive Web Applications (PWAs)
Firebase deployment
Continuous Integration (CI)
Service worker
Summary
Server-Side Rendering with Nuxt Chevron down icon Chevron up icon
Server-Side Rendering with Nuxt
Nuxt
Summary
Patterns Chevron down icon Chevron up icon
Patterns
Components
Summary

Recommendations for you

Left arrow icon
Web Development with Blazor
Web Development with Blazor
Read more
Apr 2024 366 pages
Full star icon 4 (17)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $29.99
$24.99 $35.99
$29.99 $43.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
Building Production-Grade Web Applications with Supabase
Building Production-Grade Web Applications with Supabase
Read more
Aug 2024 534 pages
Full star icon 4.3 (8)
eBook
eBook
  • eBook eBook $21.99
  • Paperback Paperback $27.98
$21.99 $31.99
$27.98 $39.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (72)
eBook
eBook
  • eBook eBook $32.99
  • Paperback Paperback $59.99
$32.99 $47.99
$59.99
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2024 828 pages
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.5 (35)
eBook
eBook
  • eBook eBook $23.98
  • Paperback Paperback $29.98
$23.98 $39.99
$29.98 $49.99
Implementing Event-Driven Microservices Architecture in .NET 7
Implementing Event-Driven Microservices Architecture in .NET 7
Read more
Mar 2023 326 pages
Full star icon 4.5 (16)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook $25.99
  • Paperback Paperback $46.99
$25.99 $37.99
$46.99
Right arrow icon

Customer reviews

Top Reviews
  • Top Reviews
  • Most Recent
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
  • Top Reviews
  • Most Recent

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

People who bought this also bought

Left arrow icon
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook $25.99
  • Paperback Paperback $46.99
$25.99 $37.99
$46.99
React and React Native
React and React Native
Read more
May 2022 606 pages
Full star icon 4.6 (17)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (72)
eBook
eBook
  • eBook eBook $32.99
  • Paperback Paperback $59.99
$32.99 $47.99
$59.99
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2022 818 pages
Full star icon 4.1 (54)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $34.98
$27.98 $39.99
$34.98 $49.99
Right arrow icon

About the author

Profile icon Halliday
Halliday
Github icon
Paul Halliday (BSc Hons) is a developer advocate with a focus on fast-moving technologies. His online courses have taught over 25,000 students across a wide variety of software development subjects. He's also a progress developer expert with expertise in NativeScript and Kendo UI.
Read more
See other products by Halliday
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact [email protected] with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at [email protected] using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on [email protected] with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on [email protected] within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on [email protected] who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on [email protected] within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela