Vue.js Quick Start Guide

Table of contents

1. Title Page
2. Copyright and Credits
   1. Vue.js Quick Start Guide
3. Packt Upsell
   1. Why subscribe?
   2. Packt.com
4. Contributors
   1. About the author
   2. About the reviewers
   3. Packt is searching for authors like you
5. Preface
   1. Who this book is for
   2. What this book covers
   3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
   4. Get in touch
      1. Reviews
6. Introducing Vue
   1. What is Vue?
      1. The quickest way to start using Vue2
         1. Mustache template example
         2. Using Vue's data option as a function
   2. What problems does Vue solve?
      1. Vue, a jQuery successor
      2. A learning tool for beginners
      3. A versatile and progressive framework
      4. A tool for animations and transitions
      5. Features similar to other modern frontend frameworks and libraries
   3. Why use Vue?
      1. Declarative code
      2. Feels like a right fit for a variety of projects
      3. Easy-to-understand syntax
         1. Directives
         2. Modifiers
         3. Vue methods
         4. Computed properties and watchers
   4. Summary
7. Basic Concepts of Vue 2
   1. Data-driven views in Vue
      1. What is reactivity?
      2. How does Vue achieve this?
   2. Computed properties and methods
      1. What exactly are these dependencies?
   3. Understanding components, templates, and props
      1. Adding props and data for better components
      2. Adding content to our components with the help of the data object
      3. Other ways of building component templates in Vue
      4. Building a simple web page out of components
         1. Adding simple components to a Vue instance
         2. Creating a more complex page out of components in Vue
         3. Improving our Vue-based layouts with v-for
   4. Watchers in Vue
   5. Lifecycle hooks
      1. What is a component's lifecycle?
      2. How do we use lifecycle hooks?
   6. Summary
8. Working with Vue-CLI, Components, Props, and Slots
   1. Vue component hierarchy, and global and local components
   2. Using Vue-CLI
      1. Installing Git bash
      2. Installing nvm
         1. Why use nvm?
      3. Installing and updating Vue-cli
      4. Initializing a new project with Vue-cli 
   3. Setting up code editors to use with Vue
      1. Working with Vue.js in Sublime Text 3
         1. Dowloading Sublime Text 3
         2. Install Package Manager
      2. Working with Vue.js in VS Code
         1. Installing VS Code and extensions
   4. The structure of our Vue-cli-based project
   5. Adding basic functionality to a child component
   6. Adding props to our HelloAgain.vue
      1. Passing data from children to parent components
   7. Introduction to slots
   8. Summary
9. Filters and Mixins
   1. Using filters
      1. An example of a filter that rounds up student grades
      2. Using filters as a replacement for conditional directives
      3. Chaining filters in Vue
   2. Working with mixins
      1. Building a simple app with repetitive functionality in different components
      2. Staying DRY with mixins
      3. Refactoring our viewportSize mixin
   3. Summary
10. Making Your Own Directives and Plugins
    1. Making our own directives
       1. Understanding custom directives
       2. Building a simple custom directive
       3. Using local directives
       4. Passing values to custom directives
    2. Working with Vue plugins
       1. Creating the simplest possible Vue plugin
       2. Creating a plugin with options defined
       3. Publishing a Vue plugin
       4. Adding a simple plugin
       5. Installing our NPM plugin in a Vue project using Vue CLI 3
       6. Additional plugins to learn from
    3. Summary
11. Transitions and Animations
    1. Transitions and animations in CSS
       1. How CSS transitions work
       2. How CSS animations work
       3. Differences between transitions and animations in CSS
          1. Rules for CSS transitions
          2. Rules for CSS animations
    2. The transition element in Vue
       1. Setting up the enter transition
       2. Setting up the leave transition
       3. Naming transition components
       4. CSS animations with transition component
    3. Custom transition classes
    4. Combining transition modes, duration, keys, and v-if
    5. Binding CSS styles in Vue
       1. Animating a button on click with dynamic CSS classes
    6. Working with transition groups
    7. JavaScript animation hooks
    8. Summary
12. Using Vuex
    1. What is state?
    2. State management, data stores, and one-way data flows
       1. The Vuex state management pattern
          1. The store
          2. Getters in the Vuex store
          3. Vuex store mutations
          4. Actions in Vuex store
          5. Hot reloading
    3. Building a fruit counter app with Vuex
    4. Using the Vue DevTools plugin to track our Vuex state
    5. Improving our fruit counter app
    6. Summary
13. Using Nuxt.js and Vue-Router
    1. Single-page applications and server-side rendering
    2. Installing Nuxt.js and previewing the default project
       1. Installing Nuxt.js with the vue init command
       2. Debugging an eslint error
       3. Installing with create-nuxt-app
       4. Editing the index.vue file
    3. Nuxt pages as routes
    4. Adding navigation to Nuxt apps via the components folder
    5. Adding content to our Nuxt app's pages
    6. Adding page transitions to our Nuxt.js app
    7. Summary
14. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think