Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Vue.js 2 Cookbook
  • Table Of Contents Toc
  • Feedback & Rating feedback
Vue.js 2 Cookbook

Vue.js 2 Cookbook

By : Passaglia
5 (6)
close
close
Vue.js 2 Cookbook

Vue.js 2 Cookbook

5 (6)
By: Passaglia

Overview of this book

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.
Table of Contents (12 chapters)
close
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Sections
Conventions
Reader feedback
Customer support
Free Chapter
1
Getting Started with Vue.js
chevron up
Getting Started with Vue.js
Introduction
Writing Hello World with Vue.js
Writing lists
Creating a dynamic and animated list
Reacting to events such as clicks and keystrokes
Choosing a development environment
Formatting your text with filters
Debugging your application with mustaches (for example, a JSON filter)
X-raying your application with Vue developer tools
Upgrading to Vue.js 2
2
Basic Vue.js Features
Basic Vue.js Features
Introduction
Learning how to use computed properties
Filtering a list with a computed property
Sorting a list with a computed property
Formatting currencies with filters
Formatting dates with filters
Displaying and hiding an element conditionally
Adding styles conditionally
Adding some fun to your app with CSS transitions
Outputting raw HTML
Creating a form with checkboxes
Creating a form with radio buttons
Creating a form with a select element
3
Transitions and Animations
Transitions and Animations
Introduction
Integrating with third-party CSS animation libraries such as animate.css
Adding your own transition classes
Animating with JavaScript instead of CSS
Transitioning on the initial render
Transitioning between elements
Letting an element leave before the enter phase in a transition
Adding entering and leaving transitions for elements of a list
Transitioning elements that move in a list
Animating the state of your components
Packaging reusable transitions into components
Dynamic transitions
4
All About Components
All About Components
Introduction
Creating and registering a component
Passing data to your components with props
Making components talk to each other
Making components talk with Vuex
Reading a child's state
Using components in your own components
Using mixins in your components
Content distribution with slots
Single file components with Webpack
Loading your components asynchronously
Having recursive components
Reusable component checklist
5
Vue Communicates with the Internet
Vue Communicates with the Internet
Introduction
Sending basic AJAX requests with Axios
Validating user data before sending it
Creating a form and sending data to your server
Recovering from an error during a request
Creating a REST client (and server!)
Implementing infinite scrolling
Processing a request before sending it out
Preventing XSS attacks to your app
6
Single Page Applications
Single Page Applications
Introduction
Creating an SPA with vue-router
Fetching data before switching route
Using named dynamic routes
Having more than one router-view in your page
Compose your routes hierarchically
Using route aliases
Adding transitions between your routes
Managing errors for your routes
Adding a progress bar to load pages
How to redirect to another route
Saving scrolling position when hitting back
7
Unit Testing and End-to-End Testing
Unit Testing and End-to-End Testing
Introduction
Using Jasmine for testing Vue
Adding some Karma to your workflow
Testing your application state and methods
Testing the DOM
Testing DOM asynchronous updates
End-to-end testing with nightwatch
Simulating a double-click in nightwatch
Different styles of unit testing
Stubbing external API calls with Sinon.JS
Measuring the coverage of your code
8
Organize + Automate + Deploy = Webpack
Organize + Automate + Deploy = Webpack
Introduction
Extracting logic from your components to keep the code tidy
Bundling your component with Webpack
Organizing your dependencies with Webpack
Using external components in your Webpack project
Developing with continuous feedback with hot reloading
Using Babel to compile from ES6
Running a code linter while developing
Using only one command to build both a minified and a development .js file
Releasing your components to the public
9
Advanced Vue.js – Directives, Plugins, and Render Functions
Advanced Vue.js – Directives, Plugins, and Render Functions
Introduction
Creating a new directive
Using WebSockets in Vue
Writing a plugin for Vue
Rendering a simple component manually
Rendering a component with children
Using JSX to render a component
Creating a functional component
Building a responsive table with higher-order components
10
Large Application Patterns with Vuex
Large Application Patterns with Vuex
Introduction
Dynamically loading pages in your vue-router
Building a simple storage for the application state
Understanding Vuex mutations
Listing your actions in Vuex
Separating concerns with modules
Building getters to help retrieve your data
Testing your store
11
Integrating with Other Frameworks
Integrating with Other Frameworks
Introduction
Building universal applications with Electron
Using Vue with Firebase
Creating a real-time app with Feathers
Creating a reactive app with Horizon

X-raying your application with Vue developer tools

Using mustaches is a quick way to display the content of an object. However it has some limitations; one of them outlined in the previous recipe is that, out of the box, it breaks when dealing with objects that contain circular references. A tool that doesn't present this limitation when inspecting internal variables and that sports many more debugging features is Vue developer tools. There's a Chrome extension that will help you at every step of development, visualizing the state of your components, where they are in the page, and more. It's also deeply integrated with Vuex (covered in later recipes) and has a time machine feature that lets you rewind the event flow directly from the browser.

Getting Ready

To install it, you just have to download the extension from the Chrome Web Store in the extensions category. Just look for Vue.js devtools and you'll find it right away, press the ADD TO CHROME button, and you're set to go:

Unfortunately you won't be able to use it in some configurations; particularly it currently doesn't seem to work in iframe environments and JSFiddle is one of them, so to see it you have to at least use the one page approach outlined in the Choosing a development environment recipe.
.

How to do it...

  1. Access the Developer Tools of Chrome (Usually with cmd + opt + I or Ctrl + Shift + I) and you will see a new tab at the end that says Vue. Clicking it will bring forth the developer tools.
To make it work for pages opened via the file:// protocol, you need to check Allow access to file URLs for this extension in Chrome's extension management panel.

You will be presented with a hierarchical tree of components laid out in your page and by selecting them you will be able to see all the variables in depth and in real time.

  1. Click on the various objects in the three to see details:

Also, you will see a useful button: the inspect DOM button (the eye) will scroll the page to where the element is and will show you the DOM representation in the Chrome developer tools. Furthermore, when you click on a component (root in the illustration) you will have a variable like $vm0 available to be used in the console. For example, you can execute methods or inspect variables.

  1. Click on the root component and write the following in the console to explore the $vm0.docsUrl property:
End of Section 10
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete