Vue.js Quick Start Guide

Other Books You May Enjoy

Summary

Adding page transitions to our Nuxt.js app

Adding content to our Nuxt app's pages

Adding navigation to Nuxt apps via the components folder

Nuxt pages as routes

Editing the index.vue file

Installing with create-nuxt-app

Debugging an eslint error

Installing Nuxt.js with the vue init command

Installing Nuxt.js and previewing the default project

Single-page applications and server-side rendering

Using Nuxt.js and Vue-Router

Summary

Improving our fruit counter app

Using the Vue DevTools plugin to track our Vuex state

Building a fruit counter app with Vuex

Hot reloading

Actions in Vuex store

Vuex store mutations

Getters in the Vuex store

The store

The Vuex state management pattern

State management data stores and one-way data flows

What is state?

Using Vuex

Summary

JavaScript animation hooks

Working with transition groups

Animating a button on click with dynamic CSS classes

Binding CSS styles in Vue

Combining transition modes duration keys and v-if

Custom transition classes

CSS animations with transition component

Naming transition components

Setting up the leave transition

Setting up the enter transition

The transition element in Vue

Rules for CSS animations

Rules for CSS transitions

Differences between transitions and animations in CSS

How CSS animations work

How CSS transitions work

Transitions and animations in CSS

Transitions and Animations

Summary

Additional plugins to learn from

Installing our NPM plugin in a Vue project using Vue CLI 3

Adding a simple plugin

Publishing a Vue plugin

Creating a plugin with options defined

Creating the simplest possible Vue plugin

Working with Vue plugins

Passing values to custom directives

Using local directives

Building a simple custom directive

Understanding custom directives

Making our own directives

Making Your Own Directives and Plugins

Summary

Refactoring our viewportSize mixin

Staying DRY with mixins

Building a simple app with repetitive functionality in different components

Working with mixins

Chaining filters in Vue

Using filters as a replacement for conditional directives

An example of a filter that rounds up student grades

Using filters

Filters and Mixins

Summary

Introduction to slots

Passing data from children to parent components

Adding props to our HelloAgain.vue

Adding basic functionality to a child component

The structure of our Vue-cli-based project

Installing VS Code and extensions

Working with Vue.js in VS Code

Install Package Manager

Dowloading Sublime Text 3

Working with Vue.js in Sublime Text 3

Setting up code editors to use with Vue

Initializing a new project with Vue-cli

Installing and updating Vue-cli

Why use nvm?

Installing nvm

Installing Git bash

Using Vue-CLI

Vue component hierarchy and global and local components

Working with Vue-CLI Components Props and Slots

Summary

How do we use lifecycle hooks?

What is a component's lifecycle?

Lifecycle hooks

Watchers in Vue

Improving our Vue-based layouts with v-for

Creating a more complex page out of components in Vue

Adding simple components to a Vue instance

Building a simple web page out of components

Other ways of building component templates in Vue

Adding content to our components with the help of the data object

Adding props and data for better components

Understanding components templates and props

What exactly are these dependencies?

Computed properties and methods

How does Vue achieve this?

What is reactivity?

Data-driven views in Vue

Basic Concepts of Vue 2

Summary

Computed properties and watchers

Vue methods

Modifiers

Directives

Easy-to-understand syntax

Feels like a right fit for a variety of projects

Declarative code

Why use Vue?

Features similar to other modern frontend frameworks and libraries

A tool for animations and transitions

A versatile and progressive framework

A learning tool for beginners

Vue a jQuery successor

What problems does Vue solve?

Using Vue's data option as a function

Mustache template example

The quickest way to start using Vue2

What is Vue?

Introducing Vue

Reviews

Get in touch

Conventions used

Download the color images

Download the example code files

To get the most out of this book

What this book covers

Who this book is for

Preface

Packt is searching for authors like you

About the reviewers

About the author

Contributors

Packt.com

Why subscribe?

Packt Upsell

Title Page

coverpage

coverpage

Title Page

Packt Upsell

Why subscribe?

Packt.com

Contributors

About the author

About the reviewers

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Reviews

Introducing Vue

What is Vue?

The quickest way to start using Vue2

Mustache template example

Using Vue's data option as a function

What problems does Vue solve?

Vue a jQuery successor

A learning tool for beginners

A versatile and progressive framework

A tool for animations and transitions

Features similar to other modern frontend frameworks and libraries

Why use Vue?

Declarative code

Feels like a right fit for a variety of projects

Easy-to-understand syntax

Directives

Modifiers

Vue methods

Computed properties and watchers

Summary

Basic Concepts of Vue 2

Data-driven views in Vue

What is reactivity?

How does Vue achieve this?

Computed properties and methods

What exactly are these dependencies?

Understanding components templates and props

Adding props and data for better components

Adding content to our components with the help of the data object

Other ways of building component templates in Vue

Building a simple web page out of components

Adding simple components to a Vue instance

Creating a more complex page out of components in Vue

Improving our Vue-based layouts with v-for

Watchers in Vue

Lifecycle hooks

What is a component's lifecycle?

How do we use lifecycle hooks?

Summary

Working with Vue-CLI Components Props and Slots

Vue component hierarchy and global and local components

Using Vue-CLI

Installing Git bash

Installing nvm

Why use nvm?

Installing and updating Vue-cli

Initializing a new project with Vue-cli

Setting up code editors to use with Vue

Working with Vue.js in Sublime Text 3

Dowloading Sublime Text 3

Install Package Manager

Working with Vue.js in VS Code

Installing VS Code and extensions

The structure of our Vue-cli-based project

Adding basic functionality to a child component

Adding props to our HelloAgain.vue

Passing data from children to parent components

Introduction to slots

Summary

Filters and Mixins

Using filters

An example of a filter that rounds up student grades

Using filters as a replacement for conditional directives

Chaining filters in Vue

Working with mixins

Building a simple app with repetitive functionality in different components

Staying DRY with mixins

Refactoring our viewportSize mixin

Summary

Making Your Own Directives and Plugins

Making our own directives

Understanding custom directives

Building a simple custom directive

Using local directives

Passing values to custom directives

Working with Vue plugins

Creating the simplest possible Vue plugin

Creating a plugin with options defined

Publishing a Vue plugin

Adding a simple plugin

Installing our NPM plugin in a Vue project using Vue CLI 3

Additional plugins to learn from

Summary

Transitions and Animations

Transitions and animations in CSS

How CSS transitions work

How CSS animations work

Differences between transitions and animations in CSS

Rules for CSS transitions

Rules for CSS animations

The transition element in Vue

Setting up the enter transition

Setting up the leave transition

Naming transition components

CSS animations with transition component

Custom transition classes

Combining transition modes duration keys and v-if

Binding CSS styles in Vue

Animating a button on click with dynamic CSS classes

Working with transition groups

JavaScript animation hooks

Summary

Using Vuex

What is state?

State management data stores and one-way data flows

The Vuex state management pattern

The store

Getters in the Vuex store

Vuex store mutations

Actions in Vuex store

Hot reloading

Building a fruit counter app with Vuex

Using the Vue DevTools plugin to track our Vuex state

Improving our fruit counter app

Summary

Using Nuxt.js and Vue-Router

Single-page applications and server-side rendering

Installing Nuxt.js and previewing the default project

Installing Nuxt.js with the vue init command

Debugging an eslint error

Installing with create-nuxt-app

Editing the index.vue file

Nuxt pages as routes

Adding navigation to Nuxt apps via the components folder

Adding content to our Nuxt app's pages

Adding page transitions to our Nuxt.js app

Summary

Other Books You May Enjoy