Working with Vue.js

Book description

Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is is now considered one of the primary front-end frameworks, and not without good reason. Its component-based architecture was designed to be flexible and easy to adopt, making it just as easy to integrate into projects and use alongside non-Vue code as it is to build complex client-side applications.

If you're an experienced developer looking to make a start with Vue, this book is for you. It provides a rapid introduction to the key topics that you'll need to understand. It contains:

  • Getting up and Running with the Vue.js 2.0 Framework by Jack Franklin
  • Getting Started with Vuex: a Beginner's Guide by Michael Wanyoike
  • A Beginner's Guide to Vue CLI by Ahmed Bouchefra
  • A Beginner's Guide to Working With Components in Vue by Kingsley Silas
  • A Beginner's Guide to Working with Forms in Vue by Kingsley Silas
  • How to Conditionally Apply a CSS Class in Vue.js by Chad Campbell
  • How to Replace jQuery with Vue by Nilson Jacques
  • Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps by Olayinka Omole
  • Optimize the Performance of a Vue App with Async Components by Michiel Mulders

Publisher resources

View/Submit Errata

Table of contents

  1. Working with Vue.js
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. Preface
    1. Who Should Read This Book?
    2. Conventions Used
  7. Chapter 1: Getting up and Running with the Vue.js 2.0 Framework
    1. Inspiration from Other Libraries
    2. Components, Components, Components
    3. Setting Up a Project
    4. Writing Our First Vue.js App
    5. Vue Devtools
    6. Building the App
      1. Github
      2. Initial Setup
    7. Forms in Vue.js
    8. Tracking a Form Input
    9. Displaying Results From GitHub
      1. Conditional Rendering
      2. Fetching from GitHub
      3. Showing Some Stats in the View
    10. Refactors
    11. Conclusion
  8. Chapter 2: Getting Started with Vuex: a Beginner’s Guide
    1. A Shopping Cart Example
    2. Prerequisites
    3. Build a Counter Using Local State
      1. Getting Set Up
      2. Creating the Counter
      3. Incrementing and Decrementing
        1. Live Code
    4. How Vuex Works
      1. The Vuex Store
      2. Working with State
        1. The mapState Helper
      3. Getters
        1. The mapGetters Helper
      4. Changing State with Mutations
        1. The mapMutations Helper
      5. Actions
        1. The mapActions Helper
    5. Re-build Counter App Using Vuex
      1. Live Code
    6. Conclusion
  9. Chapter 3: A Beginner’s Guide to Vue CLI
    1. Vue CLI v3 Installation and Requirements
      1. Requirements
      2. Installing Vue CLI v3
        1. Fixing Permissions
    2. Creating a Vue Project
      1. Naming a Project
      2. What is the Vue CLI Service?
      3. The Project Anatomy
    3. Vue CLI Plugins
      1. What a Vue Plugin Is
      2. How to Add a Vue Plugin
      3. Some Useful Vue Plugins
    4. What About webpack?
    5. Vue CLI UI
      1. Presets
    6. Conclusion
  10. Chapter 4: A Beginner’s Guide to Working With Components in Vue
    1. How to Create Components in Vue
      1. Single-file Components
    2. Passing Data to Components Via Props
      1. Live Code
    3. Communicating From a Child to Parent Component via an Event Bus
      1. Live Code
    4. Nesting Content in Components Using Slots
      1. Live Code
    5. Conclusion
  11. Chapter 5: A Beginner’s Guide to Working with Forms in Vue
    1. Two-way Data Binding with v-model
      1. Live Code
    2. Altering the Browser’s Default Behavior with Modifiers
      1. Live Code
      2. Live Code
    3. Formatting Output with Filters
      1. Live Code
    4. VeeValidate
      1. Live Code
    5. Conclusion
  12. Chapter 6: How to Conditionally Apply a CSS Class in Vue.js
    1. Step 1: Define Your CSS Classes
    2. Step 2: Create Your Class Bindings
      1. Binding using object syntax
      2. Binding using array syntax
  13. Chapter 7: How to Replace jQuery with Vue
    1. What We’re Building
    2. jQuery
      1. Live Code
      2. Downsides
    3. Converting to Vue
      1. Data
      2. Modifying the template
      3. Events and methods
      4. Computed properties
      5. Filters
        1. Live Code
    4. Summing Up
  14. Chapter 8: Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps
    1. What Nuxt.js Is
      1. Static Generation
      2. Under the Hood of Nuxt.js
      3. How it works
    2. Creating A Serverless Static Site With Nuxt.js
      1. Github
      2. Application Setup and Configuration
        1. Install vue-cli
        2. Understanding the Headers
      3. Working with Page Layouts
      4. Simple Pages and Routes
      5. Building the Blog Homepage
      6. Building the About page
      7. Showing Blog Posts on the Homepage
        1. Where to Retreive the Content
        2. The ~ Symbol
      8. Adding Dynamic Routes
      9. Generating Static Files
      10. Deployment on Firebase Hosting
    3. Conclusion
  15. Chapter 9: Optimize the Performance of a Vue App with Async Components
    1. Async Components
    2. Dynamic Imports
    3. Conditionally Loading Async Components
      1. Project Setup
      2. Making the Store View
    4. Async with Loading and Error Component
    5. Conclusion

Product information

  • Title: Working with Vue.js
  • Author(s): Jack Franklin, Michael Wanyoike, Ahmed Bouchefra, Kingsley Silas, Chad A. Campbell, Nilson Jacques, Olayinka Omole, Michiel Mulders
  • Release date: June 2019
  • Publisher(s): SitePoint
  • ISBN: 9781925836264