Cover image for Vue.js 2 Web Development Projects

Vue.js 2 Web Development Projects

Author Guillaume Chau
Release Date: 2017/11/01
ISBN: 9781787127463
Topic:
0%
359
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

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 data.

By the end of this book you will have enough skills and will have worked through enough examples of real Vue.js projects to create interactive professional web applications with Vue.js 2.5.

Style and approach

Project-based guide that will help you start building applications immediately with an easy to follow approach. Our book will have 6 concrete projects. It will take readers through clear and logical steps, with screenshots and tips along the way to help you follow the guide and learn how to get more from Vue.js.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Downloading the color images of this book
      3. Errata
      4. Piracy
      5. Questions
  2. Getting Started with Vue
    1. Why another frontend framework?
      1. A trending project
      2. Compatibility requirements
    2. One-minute setup
    3. Creating an app
      1. Vue devtools
    4. Templates make your DOM dynamic
      1. Displaying text
      2. Adding basic interactivity with directives
    5. Summary
  3. Project 1 - Markdown Notebook
    1. A basic note editor
      1. Setting up the project
      2. The note editor
      3. The preview pane
        1. Computed property
        2. Text interpolation escaping
        3. Displaying HTML
      4. Saving the note
        1. Watching changes
        2. Using a method
        3. Accessing the Vue instance
      5. Loading the saved note
        1. Lifecycle hooks
        2. Initializing directly in the data
    2. Multiple notes
      1. The note list
        1. A method to create a new note
        2. Button and click events with v-on
        3. Binding attributes with v-bind
        4. Displaying a list with v-for
      2. Selecting a note
        1. The current note
        2. Dynamic CSS classes
        3. Conditional templates with v-if
        4. Saving the notes with the deep option
        5. Saving the selection
      3. The note toolbar with extras inside
        1. Renaming the note
        2. Deleting the note
        3. Favorite notes
      4. The status bar
        1. Created date with a filter
        2. Text stats
    3. Summary
  4. Project 2 - Castle Duel Browser Game
    1. Rules of the game
    2. Setting up the project
    3. The calm before the storm
      1. The template option
      2. The app state
      3. The almighty components
    4. Building the user interface
      1. Our first component - the top bar
        1. Adding some gameplay data to the state
        2. Defining and using the components
        3. Parent-to-child communication with Props
        4. Props in our template
      2. Displaying a card
        1. Listening to native events on components
        2. Child-to-parent communication with custom events
      3. The hand
        1. Animating the hand with transitions
        2. A prettier animation
        3. Playing a card
        4. Animating the card list
          1. The key special attribute
          2. The CSS transitions
      4. The overlays
        1. Content distribution with slots
        2. The 'player turn' overlay
        3. The 'last play' overlay
        4. The 'game over' overlay
        5. Dynamic component
        6. The overlay animation
          1. Key attribute
        7. The overlay background
    5. Game world and scenery
      1. The castles
      2. Castle banners
        1. Food and health bubbles
        2. Banner bars
          1. Animating a value
      3. The animated clouds
        1. The animation
    6. Gameplay
      1. Drawing cards
        1. The initial hand
        2. The hand
      2. Playing a card
        1. No cheating allowed
        2. Removing the card from the hand
        3. Waiting for the card transition to end
        4. Applying the card effect
      3. The next turn
        1. New turn
        2. Overlay close actions
        3. Game Over!
    7. Summary
  5. Advanced Project Setup
    1. Setting up our development environment
      1. Installing vue-cli, the official command-line tool
      2. Code editors
    2. Our first full-blown Vue application
      1. Scaffolding the project
      2. Creating the app
        1. Running our application
      3. Render functions
      4. Configuring babel
        1. Babel Vue preset
        2. Polyfills
      5. Updating the dependencies
        1. Updating manually
        2. Updating automatically
        3. Updating Vue
      6. Building for production
    3. Single-File Components
      1. Template
        1. Using Pug
      2. Script
        1. JSX
      3. Style
        1. Scoped styles
        2. Adding preprocessors
          1. Sass
          2. Less
          3. Stylus
      4. Components inside components
    4. Summary
  6. Project 3 - Support Center
    1. General app structure
      1. Setting up the project
      2. Routing and pages
        1. Vue plugins
        2. Our first routes with vue–router
          1. Layouts with router–view
          2. Creating routes
          3. The router object
          4. Router modes
        3. Creating a navigation menu
          1. Router links
          2. Active class
    2. FAQ - Consuming an API
      1. Server setup
      2. Using fetch
        1. Loading animation
      3. Extending Vue with our own plugin
        1. Creating a plugin
        2. Plugin options
        3. Fetch method
      4. Reusing code with mixins
        1. Fetching remote data
        2. Loading management
        3. Error management
    3. Support tickets
      1. User authentication
        1. Storing the user in a centralized state
          1. Another plugin
        2. Login forms
          1. Smart form
          2. Form input component
          3. Customizing v-model
          4. Login component
          5. Style children of scoped elements
          6. Improving our fetch plugin
          7. Sign up operation
          8. Login operation
        3. User menu
          1. Logout method
        4. Private routes with navigation guards
          1. Route meta properties
          2. Router navigation guards
          3. Redirecting to the wanted route
        5. Initializing user authentication
        6. Guest routes
      2. Displaying and adding tickets
        1. Tickets list
          1. Session expiration
        2. Nested routes
          1. Fixing our navigation guard
        3. Sending a form
          1. Form textarea
          2. Binding attributes
          3. User actions
          4. Backup user input
      3. Advanced routing features
        1. Dynamic routes with parameters
          1. Dynamic remote data
          2. The dynamic route
        2. Not found page
        3. Transitions
        4. Scrolling behavior
    4. Summary
  7. Project 4 - Geolocated Blog
    1. Google Auth and state management
      1. Project setup
        1. Creating the app
        2. Some routing
      2. State management with Vuex
        1. Why do I need this?
        2. The Vuex Store
        3. The state is the source of truth
        4. Mutations update the state
          1. Strict mode
          2. Time-travel debugging
        5. Getters compute and return data
        6. Actions for store operations
        7. Mapping helpers
      3. User state
        1. Setting up Google OAuth
        2. Login button
        3. User in the store
          1. Adapting the router
          2. Adapting the fetch plugin
          3. Check the user session on start
          4. The profile picture
        4. Synchronizing the store and the router
    2. Embedding Google Maps
      1. Installation
        1. Getting the API key
        2. Installing the library
      2. Adding a map
      3. Connecting the BlogMap and the store
        1. Vuex modules
          1. Namespaced module
          2. Accessing global elements
        2. BlogMap module and component
          1. Mutations
          2. Actions
          3. Mapping in the component
        3. User position
          1. Centering on the user
    3. Blog posts and comments
      1. Posts store module
      2. Rendering functions and JSX
        1. Writing the view in JavaScript with render functions
          1. Dynamic templates
          2. Data objects
          3. Virtual DOM
        2. What is JSX?
        3. Blog content structure (in JSX!)
        4. No content
      3. Creating a post
        1. Draft store actions
        2. Blog Map changes
          1. Click handler
          2. Ghost marker
        3. Post form
        4. Making the request
      4. Fetching posts
        1. Store action
          1. Fetch posts action
          2. Action dispatching
        2. Displaying markers
        3. Login and logout
          1. Logout
          2. Login
      5. Selecting a post
        1. Post details
          1. Store changes for post selection and sending
          2. Post Content component
        2. Location info and scoped slots
          1. Scoped slots to pass data to the parent
          2. Implementing of the component
        3. Comments - functional components
          1. Store changes for comments
          2. Functional component
    4. Summary
  8. Project 5 - Online Shop and Scaling Up
    1. Advanced development workflow
      1. Setting up the project
        1. Generating a quick development API
        2. Launching the app
      2. Auto-prefixing CSS with PostCSS
        1. Targeting specific browsers with browserslist
      3. Improving code quality and style with ESLint
        1. Configuring ESLint
          1. Customizing the rules
        2. Running ESLint
        3. ESLint inside Webpack
      4. Unit testing with Jest
        1. Configuring Jest
          1. Babel configuration for Jest
        2. Our first unit test
        3. ESLint and Jest globals
        4. Jest snapshots
          1. Updating the snapshots
    2. Complementary topics
      1. Internationalization and code-splitting
        1. Code-splitting with dynamic imports
        2. Automatically loading the user locale
        3. Changing Language page
      2. Server-side rendering
        1. Universal App Structure
          1. Client entry
          2. Server entry
        2. State management
          1. Restoring the Vuex state on the client
        3. Webpack configuration
          1. Client configuration
          2. Server configuration
        4. Server-side setup
          1. Page template
        5. Express server
          1. Creating and updating the renderer
          2. Rendering the Vue app
        6. Running our SSR app
          1. Unnecessary fetch
      3. Production build
        1. Additional configuration
          1. Extracting the style into CSS files
          2. Production express server
        2. New npm scripts
    3. Summary
  9. Project 6 - Real-time Dashboard with Meteor
    1. Setting up the project
      1. What is Meteor?
      2. Installing Meteor
      3. Creating the project
      4. Our first Vue Meteor app
      5. Routing
    2. Production measures
      1. Meteor collections integration
      2. Setting up data
        1. Adding a collection
        2. Adding a Meteor method
      3. Simulating measures
        1. Inspecting the data
    3. Dashboard and reporting
      1. Progress bars library
      2. Meteor publication
      3. Creating the Dashboard component
        1. Indicators
        2. Listing the measures
    4. Summary
3.149.229.253