Book Image

Vue.js: Understanding its Tools and Ecosystem

By : Dave Berning
Book Image

Vue.js: Understanding its Tools and Ecosystem

By: Dave Berning

Overview of this book

Vue.js is one of the top three “go-to” JavaScript frameworks and is used by organizations such as Nintendo, NASA, and Expedia. This book is primarily focused on the ecosystem of Vue.js and its development tools. Understanding the basics of the technology behind the Vue.js ecosystem will improve your skills and make you a better problem solver. The book begins with a brief overview of Vue.js. You’ll learn to work your way through the Vue command line interface CLI 3, and use the Vue Router library to navigate between the different views of your application. As you advance through the topics, you’ll explore the use of DevTools to improve the quality of your applications and how to implement server-side rendering in your application through the Nuxt.js framework. Toward the end of the book, you’ll read about the future of Vue.js and its growing popularity. After reading this book, you’ll be able to create industry-grade applications using Vue.js and its tools.

Related Content you might be interested in

Current Title:

Small book image
Vue.js: Understanding its Tools and Ecosystem
Dave Berning
Nov, 2019 | 194 pages
Small book image
Vue.js 2 Design Patterns and Best Practices
Paul Halliday
Mar, 2018 | 344 pages
Small book image
Vue.js Quick Start Guide
Ajdin Imsirovic
Oct, 2018 | 186 pages
Small book image
Learn to Create WordPress Themes by Building 5 Projects.
Eduonix Learning Solutions
Dec, 2017 | 458 pages
Table of Contents (11 chapters)
Preface
Another JavaScript Framework?
Free Chapter
1
1. Getting Started with Vue.js
1. Getting Started with Vue.js
Understanding the Virtual DOM
Installing Vue.js
Understanding the Vue Instance
Understanding Directives
Event Handling
Event Modifiers
Key Modifiers
Conclusion
2
2. Scaffolding Projects With Vue CLI 3
2. Scaffolding Projects With Vue CLI 3
Getting Started With Vue CLI 3
A Quick Tour of the Generated Project
The Single File Vue Component
Using Pre-Processors
CSS Pre-Processors
HTML pre-processors
Modifying Webpack Configs Without Ejecting
Using the Vue CLI GUI
Conclusion
3
3. Navigation with Vue Router
3. Navigation with Vue Router
Using Vue Router with Plain JavaScript
Using Vue Router Within a Module System (Webpack, Node, Vue CLI)
Routing to Another Route
History Mode and Server Configurations
Conclusion
4
4. State Management with Vuex
4. State Management with Vuex
Installing and Setting Up Vuex
Adding and Reading Initial State Data
Using Actions to Mutate the State
Mapping Store Properties with Helper Functions
Putting It All Together
Conclusion
5
5. Debugging With Vue DevTools
5. Debugging With Vue DevTools
Installing the Vue DevTools
Navigating Through the DevTools
The Vuex Pane
Integrating and Using the Vue.js DevTools Electron App
Conclusion
6
6. Server-Side Rendering with Nuxt.js
6. Server-Side Rendering with Nuxt.js
How Does Server-Side Rendering Work?
A Little About Nuxt.js
Getting Started With Nuxt.js (Manual)
Getting Started With the Starter Template (Recommended)
Getting Started With “Create Nuxt App”
The Directory Structure
Creating Pages and Routes
Layouts
Route Transitions
Modifying the nuxt-config.js file
Adding Plugins
Adding Middleware
Fetching Data With fetch() and asyncData()
Nuxt Generate and Nuxt Build
Conclusion
7
7. Static Site Generation with VuePress
7. Static Site Generation with VuePress
Installing VuePress
Using Vue Components in Markdown Files
Creating Page Layouts
Routing in VuePress
Using VuePress for Documentation
Conclusion
8
8. Mobile App Development with NativeScript for Vue.js
8. Mobile App Development with NativeScript for Vue.js
Installation
Getting Started with Playgrounds
Differences Between Vue.js and NativeScript
Playing With the Code
Conclusion
9
9. Greater Control of JavaScript and Type Casting with TypeScript
9. Greater Control of JavaScript and Type Casting with TypeScript
What Is TypeScript?
Installation
Type Casting with TypeScript
Declaration Files
Interfaces
Classes
Using TypeScript With Vue.js
Conclusion
10
10. The Future of Vue.js and Adoption Rates
10. The Future of Vue.js and Adoption Rates
More Companies Are Adopting Vue.js
Conferences
Podcasts
Conclusion

Using the Vue CLI GUI

Now that you’ve learned how single file Vue components and how to scaffold a Webpack project, you can learn how to do all that again in a fancy GUI. It’s important that you understand concepts and how to do something before jumping straight into a user interface.

The Vue CLI UI is created and developed by Core Vue Team Member, Guillaume Chau. He’s been working hard for months to deliver a unique experience to not only scaffold Vue.js projects, but managing them and their dependencies.

If you downloaded the Vue CLI while following along with the book, then you already have the UI installed. If you installed the Vue CLI before June of 2018, then you will need to update Vue CLI to at least version 3.0.0.

# Update Vue CLI 3
$ npm install @vue/cli
# or
$ yarn add @vue/cli

After updating to at least version (> 3.0.0), you now have access to the vue ui command. The command is global and will launch the UI regardless of the project folder that you...

Previous Section
End of Section 9
Next Section