Vue.js 2 web development projects : learn Vue.js by building 6 web apps / Guillaume Chau.

Format:

Book

Author/Creator:

Chau, Guillaume, author.

Language:

English

Subjects (All):

Web site development.

Physical Description:

1 online resource (1 volume) : illustrations

Edition:

1st edition

Place of Publication:

Birmingham, [England] ; Mumbai, [India] : Packt Publishing, 2017.

System Details:

text file

Summary:

A project-based, practical guide to get hands-on into Vue.js 2.5 development by building beautiful, functional and performant web applications About This Book Build exciting real world web projects from scratch and become proefficient with Vue.js Web Development Take your app to the next level with animation, routing, state management, server-side rendering and i18n Learn professional web programming techniques to supercharge your Vue.js projects Who This Book Is For If you are a web developer who now wants to create rich and interactive professional applications using Vue.js, then this book is for you. Prior knowledge of JavaScript is assumed. Familiarity with HTML, Node.js, and tools such as npm and webpack will be helpful but not necessary. What You Will Learn Set up a full Vue.js npm project with the webpack build tool and the official scaffolding tool, vue-cli Write automatically updated templates with directives to create a dynamic web application Structure the app with reusable and maintainable components Create delightful user experiences with animations Use build tools and preprocessor to make larger professional applications Create a multi-page application with the official Vue.js routing library Integrate non-Vue.js elements into your apps like Google Maps Use the official state-management library to prevent errors Optimize your app for SEO and performance with server-side rendering and internationalization In Detail Do you want to make your web application amazingly responsive? Are you unhappy with your app's performance and looking forward to trying out ways to make your app more powerful? Then Vue.js, a framework for building user interfaces, is a great choice, and this book is the ideal way to put it through its paces. This book's project-based approach will get you to build six stunning applications from scratch and gain valuable insights in Vue.js 2.5. You'll start by learning the basics of Vue.js and create your first web app using directives along with rich and attractive user experiences. You will learn about animations and interactivity by creating a browser-based game. Using the available tools and preprocessor, you will learn how to create multi-page apps with plugins. You will create highly efficient and performant functional components for your app. Next, you will create your own online store and optimize it. Finally, you will integrate Vue.js with the real-time Meteor library and create a dashboard showing real-time d...

Contents:

Cover

Copyright

Credits

About the Author

About the Reviewer

www.PacktPub.com

Customer Feedback

Table of Contents

Preface

Chapter 1: Getting Started with Vue

Why another frontend framework?

A trending project

Compatibility requirements

One-minute setup

Creating an app

Vue devtools

Templates make your DOM dynamic

Displaying text

Adding basic interactivity with directives

Summary

Chapter 2: Project 1 - Markdown Notebook

A basic note editor

Setting up the project

The note editor

The preview pane

Computed property

Text interpolation escaping

Displaying HTML

Saving the note

Watching changes

Using a method

Accessing the Vue instance

Loading the saved note

Lifecycle hooks

Initializing directly in the data

Multiple notes

The note list

A method to create a new note

Button and click events with v-on

Binding attributes with v-bind

Displaying a list with v-for

Selecting a note

The current note

Dynamic CSS classes

Conditional templates with v-if

Saving the notes with the deep option

Saving the selection

The note toolbar with extras inside

Renaming the note

Deleting the note

Favorite notes

The status bar

Created date with a filter

Text stats

Chapter 3: Project 2 - Castle Duel Browser Game

Rules of the game

The calm before the storm

The template option

The app state

The almighty components

Building the user interface

Our first component - the top bar

Adding some gameplay data to the state

Defining and using the components

Parent-to-child communication with Props

Props in our template

Displaying a card

Listening to native events on components

Child-to-parent communication with custom events

The hand.

Animating the hand with transitions

A prettier animation

Playing a card

Animating the card list

The key special attribute

The CSS transitions

The overlays

Content distribution with slots

The 'player turn' overlay

The 'last play' overlay

The 'game over' overlay

Dynamic component

The overlay animation

Key attribute

The overlay background

Game world and scenery

The castles

Castle banners

Food and health bubbles

Banner bars

Animating a value

The animated clouds

The animation

Gameplay

Drawing cards

The initial hand

The hand

No cheating allowed

Removing the card from the hand

Waiting for the card transition to end

Applying the card effect

The next turn

New turn

Overlay close actions

Game Over!

Chapter 4: Advanced Project Setup

Setting up our development environment

Installing vue-cli, the official command-line tool

Code editors

Our first full-blown Vue application

Scaffolding the project

Creating the app

Running our application

Render functions

Configuring babel

Babel Vue preset

Polyfills

Updating the dependencies

Updating manually

Updating automatically

Updating Vue

Building for production

Single-File Components

Template

Using Pug

Script

JSX

Style

Scoped styles

Adding preprocessors

Sass

Less

Stylus

Components inside components

Chapter 5: Project 3 - Support Center

General app structure

Routing and pages

Vue plugins

Our first routes with vue-router

Layouts with router-view

Creating routes

The router object

Router modes

Creating a navigation menu

Router links

Active class

FAQ - Consuming an API

Server setup

Using fetch

Loading animation.

Extending Vue with our own plugin

Creating a plugin

Plugin options

Fetch method

Reusing code with mixins

Fetching remote data

Loading management

Error management

Support tickets

User authentication

Storing the user in a centralized state

Another plugin

Login forms

Smart form

Form input component

Customizing v-model

Login component

Style children of scoped elements

Improving our fetch plugin

Sign up operation

Login operation

User menu

Logout method

Private routes with navigation guards

Route meta properties

Router navigation guards

Redirecting to the wanted route

Initializing user authentication

Guest routes

Displaying and adding tickets

Tickets list

Session expiration

Nested routes

Fixing our navigation guard

Sending a form

Form textarea

Binding attributes

User actions

Backup user input

Advanced routing features

Dynamic routes with parameters

Dynamic remote data

The dynamic route

Not found page

Transitions

Scrolling behavior

Chapter 6: Project 4 - Geolocated Blog

Google Auth and state management

Project setup

Some routing

State management with Vuex

Why do I need this?

The Vuex Store

The state is the source of truth

Mutations update the state

Strict mode

Time-travel debugging

Getters compute and return data

Actions for store operations

Mapping helpers

User state

Setting up Google OAuth

Login button

User in the store

Adapting the router

Adapting the fetch plugin

Check the user session on start

The profile picture

Synchronizing the store and the router

Embedding Google Maps

Installation

Getting the API key

Installing the library

Adding a map

Connecting the BlogMap and the store

Vuex modules.

Namespaced module

Accessing global elements

BlogMap module and component

Mutations

Actions

Mapping in the component

User position

Centering on the user

Blog posts and comments

Posts store module

Rendering functions and JSX

Writing the view in JavaScript with render functions

Dynamic templates

Data objects

Virtual DOM

What is JSX?

Blog content structure (in JSX!)

No content

Creating a post

Draft store actions

Blog Map changes

Click handler

Ghost marker

Post form

Making the request

Fetching posts

Store action

Fetch posts action

Action dispatching

Displaying markers

Login and logout

Logout

Login

Selecting a post

Post details

Store changes for post selection and sending

Post Content component

Location info and scoped slots

Scoped slots to pass data to the parent

Implementing of the component

Comments - functional components

Store changes for comments

Functional component

Chapter 7: Project 5 - Online Shop and Scaling Up

Advanced development workflow

Generating a quick development API

Launching the app

Auto-prefixing CSS with PostCSS

Targeting specific browsers with browserslist

Improving code quality and style with ESLint

Configuring ESLint

Customizing the rules

Running ESLint

ESLint inside Webpack

Unit testing with Jest

Configuring Jest

Babel configuration for Jest

Our first unit test

ESLint and Jest globals

Jest snapshots

Updating the snapshots

Complementary topics

Internationalization and code-splitting

Code-splitting with dynamic imports

Automatically loading the user locale

Changing Language page

Server-side rendering

Universal App Structure

Client entry

Server entry

State management.

Restoring the Vuex state on the client

Webpack configuration

Client configuration

Server configuration

Server-side setup

Page template

Express server

Creating and updating the renderer

Rendering the Vue app

Running our SSR app

Unnecessary fetch

Production build

Additional configuration

Extracting the style into CSS files

Production express server

New npm scripts

Chapter 8: Project 6 - Real-time Dashboard with Meteor

What is Meteor?

Installing Meteor

Creating the project

Our first Vue Meteor app

Routing

Production measures

Meteor collections integration

Setting up data

Adding a collection

Adding a Meteor method

Simulating measures

Inspecting the data

Dashboard and reporting

Progress bars library

Meteor publication

Creating the Dashboard component

Indicators

Listing the measures

Index.

Notes:

Includes bibliographical references and index.

Description based on online resource; title from PDF title page (EBC, viewed January 3, 2018).

ISBN:

9781787129443

1787129446

OCLC:

1019129024