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.
Table of contents
- Preface
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
- Advanced Vue.js – Directives, Plugins, and Render Functions
- Large Application Patterns with Vuex
- Integrating with Other Frameworks
Product information
- Title: Vue.js 2 Cookbook
- Author(s):
- Release date: April 2017
- Publisher(s): Packt Publishing
- ISBN: 9781786468093
You might also like
book
Learning Vue.js 2
Learn how to build amazing and complex reactive web applications easily with Vue.js About This Book …
book
Vue.js 2 Web Development Projects
A project-based, practical guide to get hands-on into Vue.js 2.5 development by building beautiful, functional and …
book
Vue.js: 11 Practical Projects
Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is is …
book
Pro Vue.js 2
Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing …
