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