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

Conclusion

Nuxt.js is a server-side rendering framework for Vue.js inspired by React’s counterpart, Next. Nuxt.js launched into the mainstream in 2016 and has become the recommended third-party solution for server-side rendering. Although Vue.js does have a first party library (Vue Server Render) that you can use, Nuxt takes all of the pain of setting up your own SSR project out for you. Nuxt.js is an incredibly powerful and easy-to-use framework with a lot of additional features that were not discovered in this chapter such as the head() property, additional components like <no-ssr>, and more.

You should have gained a good understanding of what Nuxt.js is and how it can improve your web applications. I highly recommend reading through all of their documentation; it’s some of the best in the industry.

Previous Section
End of Chapter 6
Next Chapter