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

History Mode and Server Configurations

Currently, in your application, the URLs are prefixed with /#/ this is the default mode which is also known as “hash mode”. When in hash mode, Vue.js uses the /#/ to simulate a URL so the page won’t be reloaded when the URL changes. However, you can change this by enabling history mode. In history mode, Vue Router takes advantage of the ‘history.pushState` API to prevent the page from reloading.

To enable history mode, just add the mode attribute with a value of history to the VueRouter object.

router.js

export default new Router({
  mode: 'history', // Down here!
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ],
});

This removes the hash in the URL and makes the URL path look “normal” as desired. However, since it’s a singe page application, in history mode and without server configurations, navigating to a route will result in...

Previous Section
End of Section 5
Next Section