O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Vue.js 2 Cookbook

Book Description

101 hands-on recipes that teach you how to build professional, structured web apps with Vue.js

About This Book

  • Understand and use Vue’s reactivity system, data binding, and computed properties
  • Create fluid transitions in your application with Vue’s built-in transition system
  • Use Vuex and Webpack to build medium-to-large scale SPAs and enhance your development workflow

Who This Book Is For

This book is for developers who want to learn about Vue.js through practical examples to quickly and efficiently build modern, interactive web applications. Prior experience and familiarity with JavaScript, HTML, and CSS are recommended as the recipes build upon that knowledge. It will also enable both new and existing Vue.js users to expand their knowledge of the framework.

What You Will Learn

  • Understand the fundamentals of Vue.js through numerous practical examples
  • Piece together complex web interfaces using the Vue.js component system
  • Use Webpack and Babel to enhance your development workflow
  • Manage your application’s state using Vuex and see how to structure your projects according to best practices
  • Seamlessly implement routing in your single page applications using Vue Router
  • Find out how to use Vue.js with a variety of technologies such as Node.js, Electron, Socket.io, Firebase, and HorizonDB by building complete applications

In Detail

Vue.js is an open source JavaScript library for building modern, interactive web applications. With a rapidly growing community and a strong ecosystem, Vue.js makes developing complex single page applications a breeze. Its component-based approach, intuitive API, blazing fast core, and compact size make Vue.js a great solution to craft your next front-end application.

From basic to advanced recipes, this book arms you with practical solutions to common tasks when building an application using Vue. We start off by exploring the fundamentals of Vue.js: its reactivity system, data-binding syntax, and component-based architecture through practical examples.

After that, we delve into integrating Webpack and Babel to enhance your development workflow using single file components. Finally, we take an in-depth look at Vuex for state management and Vue Router to route in your single page applications, and integrate a variety of technologies ranging from Node.js to Electron, and Socket.io to Firebase and HorizonDB.

This book will provide you with the best practices as determined by the Vue.js community.

Style and approach

This book offers detailed, easy-to-follow recipes that will help you harness full potential of Vue.js. The guide will provide you with working code examples for many of the common problems that web developers face. Each recipe is designed to help you quickly understand and solve a particular problem that is commonly faced by developers using Vue.js in a simple and intuitive manner. This book also includes larger recipes to address obstacles arising from building medium-to-large scale applications with Vue.js.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Sections
      1. Getting ready
      2. How to do it…
      3. How it works…
      4. There's more…
      5. See also
    5. Conventions
    6. Reader feedback
    7. Customer support
      1. Downloading the example code
      2. Errata
      3. Piracy
      4. Questions
  2. Getting Started with Vue.js
    1. Introduction
    2. Writing Hello World with Vue.js
      1. Getting Ready
      2. How to do it...
      3. How it works...
      4. There's more
    3. Writing lists
      1. Getting Ready
      2. How to do it...
        1. Range of numbers
        2. Arrays
          1. Arrays with index notation
        3. Objects
      3. How it works...
        1. Range of numbers
        2. Arrays
        3. Objects
    4. Creating a dynamic and animated list
      1. Getting Ready
      2. How to do it...
      3. How it works...
      4. There's more
    5. Reacting to events such as clicks and keystrokes
      1. Getting Ready
      2. How to do it...
      3. How it works...
        1. Two-way data binding
      4. There's more
    6. Choosing a development environment
      1. How to do it...
        1. Just the browser
          1. Adding dependencies with just the browser
        2. TextEditor
          1. Adding dependencies with a TextEditor
        3. Node package manager (npm)
          1. Adding dependencies with npm
        4. IDE
        5. Wrap up
    7. Formatting your text with filters
      1. Getting Ready
      2. How to do it...
      3. How it works...
    8. Debugging your application with mustaches (for example, a JSON filter)
      1. How to do it...
      2. How it works...
    9. X-raying your application with Vue developer tools
      1. Getting Ready
      2. How to do it...
    10. Upgrading to Vue.js 2
      1. How to do it...
      2. How it works...
        1. Deprecation of $broadcast, $dispatch, and the events option
        2. Deprecation of array filters
        3. Deprecation of Vue.config.delimiters
        4. Renaming of life cycle hooks
  3. Basic Vue.js Features
    1. Introduction
    2. Learning how to use computed properties
      1. Getting ready
      2. How to do it...
      3. There's more...
        1. Caching computed properties
        2. Computed setters
    3. Filtering a list with a computed property
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    4. Sorting a list with a computed property
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    5. Formatting currencies with filters
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    6. Formatting dates with filters
      1. Getting ready
      2. How to do it...
    7. Displaying and hiding an element conditionally
      1. Getting ready
      2. How to do it...
      3. How it works...
    8. Adding styles conditionally
      1. How to do it...
      2. How it works...
    9. Adding some fun to your app with CSS transitions
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    10. Outputting raw HTML
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    11. Creating a form with checkboxes
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    12. Creating a form with radio buttons
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    13. Creating a form with a select element
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
  4. Transitions and Animations
    1. Introduction
    2. Integrating with third-party CSS animation libraries such as animate.css
      1. Getting ready
      2. How to do it...
      3. How does it work...
    3. Adding your own transition classes
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Animating with JavaScript instead of CSS
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    5. Transitioning on the initial render
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Transitioning between elements
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
        1. Transitioning between more than two elements
        2. Setting the key attribute dynamically
    7. Letting an element leave before the enter phase in a transition
      1. Getting ready
      2. How to do it...
        1. The two elements problem
        2. Transition modes
      3. How it works...
    8. Adding entering and leaving transitions for elements of a list
      1. Getting ready
      2. How to do it...
      3. How it works...
    9. Transitioning elements that move in a list
      1. Getting ready
      2. How to do it...
      3. How it works...
    10. Animating the state of your components
      1. Getting ready
      2. How to do it...
      3. How it works...
    11. Packaging reusable transitions into components
      1. Getting ready
      2. How to do it...
        1. Building the basic web page
        2. Building the reusable transition
        3. Using our transition with the elements in our page
      3. How it works...
    12. Dynamic transitions
      1. Getting ready
      2. How to do it...
      3. How it works...
  5. All About Components
    1. Introduction
    2. Creating and registering a component
      1. Getting ready
      2. How to do it...
      3. How it works...
        1. Scope of components
        2. The render function
    3. Passing data to your components with props
      1. Getting ready
      2. How to do it...
      3. How it works...
        1. Kebab case and camel case
      4. There's more
    4. Making components talk to each other
      1. Getting ready
      2. How to do it...
      3. How it works...
    5. Making components talk with Vuex
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There’s more
    6. Reading a child's state
      1. Getting ready
      2. How to do it...
      3. How it works...
        1. Using ref with v-for
    7. Using components in your own components
      1. Getting ready
      2. How to do it...
      3. How it works...
    8. Using mixins in your components
      1. Getting ready
      2. How to do it...
      3. How it works...
        1. Mixin order
      4. There’s more
    9. Content distribution with slots
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There’s more
        1. Named slots
        2. Scoped slots
    10. Single file components with Webpack
      1. Getting ready
      2. How do do it...
      3. How it works...
      4. There’s more
    11. Loading your components asynchronously
      1. Getting ready
      2. How to do it...
      3. How it works...
    12. Having recursive components
      1. Getting ready
      2. How to do it...
      3. How it works...
        1. Recursive component and local registration
        2. Avoiding a stack overflows!
    13. Reusable component checklist
      1. Getting ready
      2. How to do it...
      3. How it works...
  6. Vue Communicates with the Internet
    1. Introduction
    2. Sending basic AJAX requests with Axios
      1. Getting ready
      2. How to do it...
      3. How it works...
    3. Validating user data before sending it
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Creating a form and sending data to your server
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    5. Recovering from an error during a request
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Creating a REST client (and server!)
      1. Getting ready
      2. How to do it...
      3. How it works...
    7. Implementing infinite scrolling
      1. Getting ready
      2. How to do it...
      3. How it works...
    8. Processing a request before sending it out
      1. Getting ready
      2. How to do it...
      3. How it works...
    9. Preventing XSS attacks to your app
      1. Getting ready
      2. How to do it...
      3. How it works...
  7. Single Page Applications
    1. Introduction
    2. Creating an SPA with vue-router
      1. Getting ready
      2. How to do it…
      3. How it works…
      4. There's more…
    3. Fetching data before switching route
      1. Getting ready
      2. How to do it…
      3. How it works…
    4. Using named dynamic routes
      1. Getting ready
      2. How to do it…
      3. How it works…
    5. Having more than one router-view in your page
      1. Getting ready
      2. How to do it…
      3. How it works…
    6. Compose your routes hierarchically
      1. Getting ready
      2. How to do it...
      3. How it works…
    7. Using route aliases
      1. Getting ready
      2. How to do it…
      3. How it works…
    8. Adding transitions between your routes
      1. Getting ready
      2. How to do it…
      3. How it works…
    9. Managing errors for your routes
      1. Getting ready
      2. How to do it…
      3. How it works…
    10. Adding a progress bar to load pages
      1. Getting ready
      2. How to do it…
      3. How it works…
    11. How to redirect to another route
      1. Getting ready
      2. How to do it…
      3. How it works…
      4. There's more…
        1. Redirecting to 404s
        2. Named redirecting
        3. Redirecting with parameters
        4. Dynamic redirecting
    12. Saving scrolling position when hitting back
      1. Getting ready
      2. How to do it…
      3. How it works…
  8. Unit Testing and End-to-End Testing
    1. Introduction
    2. Using Jasmine for testing Vue
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    3. Adding some Karma to your workflow
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    4. Testing your application state and methods
      1. Getting ready
      2. How to do it...
      3. How it works...
    5. Testing the DOM
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Testing DOM asynchronous updates
      1. Getting ready
      2. How to do it...
      3. How it works...
    7. End-to-end testing with nightwatch
      1. Getting ready
      2. How to do it...
      3. How it works...
    8. Simulating a double-click in nightwatch
      1. Getting ready
      2. How it works...
      3. How it works...
    9. Different styles of unit testing
      1. Getting ready
      2. How to do it...
      3. How it works...
    10. Stubbing external API calls with Sinon.JS
      1. Getting ready
      2. How to do it...
      3. How it works...
    11. Measuring the coverage of your code
      1. Getting ready
      2. How to do it...
      3. How it works...
  9. Organize + Automate + Deploy = Webpack
    1. Introduction
    2. Extracting logic from your components to keep the code tidy
      1. Getting ready
      2. How to do it...
        1. Creating a clean Webpack project
        2. Building the compound interest calculator
      3. How it works...
    3. Bundling your component with Webpack
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    4. Organizing your dependencies with Webpack
      1. Getting ready
      2. How to do it...
      3. How it works...
    5. Using external components in your Webpack project
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Developing with continuous feedback with hot reloading
      1. Getting ready
      2. How to do it...
      3. How it works...
    7. Using Babel to compile from ES6
      1. Getting ready
      2. How to do it...
      3. How it works...
    8. Running a code linter while developing
      1. Getting ready
      2. How to do it...
      3. How it works...
    9. Using only one command to build both a minified and a development .js file
      1. Getting ready
      2. How to do it…
      3. How it works...
    10. Releasing your components to the public
      1. Getting ready
      2. How to do it...
      3. How it works...
  10. Advanced Vue.js – Directives, Plugins, and Render Functions
    1. Introduction
    2. Creating a new directive
      1. Getting ready
      2. How to do it...
      3. How it works…
    3. Using WebSockets in Vue
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Writing a plugin for Vue
      1. Getting ready
      2. How to do it...
      3. How it works...
    5. Rendering a simple component manually
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Rendering a component with children
      1. Getting ready
      2. How to do it...
      3. How it works...
    7. Using JSX to render a component
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    8. Creating a functional component
      1. Getting ready
      2. How to do it...
      3. How it works...
    9. Building a responsive table with higher-order components
      1. Getting ready
      2. How to do it...
      3. How it works...
  11. Large Application Patterns with Vuex
    1. Introduction
    2. Dynamically loading pages in your vue-router
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    3. Building a simple storage for the application state
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Understanding Vuex mutations
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    5. Listing your actions in Vuex
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Separating concerns with modules
      1. Getting ready
      2. How to do it...
      3. How it works...
    7. Building getters to help retrieve your data
      1. Getting ready
      2. How to do it...
      3. How it works...
        1. Accessing other getters
        2. Passing an argument
    8. Testing your store
      1. Getting ready
      2. How to do it...
        1. Software requirements
        2. Testing mutations
        3. Testing actions
      3. How it works...
  12. Integrating with Other Frameworks
    1. Introduction
    2. Building universal applications with Electron
      1. Getting ready
      2. How to do it...
      3. How it works...
    3. Using Vue with Firebase
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Creating a real-time app with Feathers
      1. Getting ready
      2. How to do it...
      3. How it works...
    5. Creating a reactive app with Horizon
      1. Getting ready
      2. How to do it...
      3. How it works...