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.
Table of Contents (11 chapters)

Creating Page Layouts

You can create your own custom page layouts that you can modify the HTML around the content or import global components like a <Header /> or <Footer /> for example.

In your root README.md you can add something called “front matter.” All front matter is a section where you can tell the page how to render. In the front matter, you can add options, items, even content that should be rendered within the page’s content.

Creating front matter is as simple as creating two lines of three hyphens (---).

root/README.md

---
---

Inside of the front matter, add the property layout with the value of whatever you want. Keep in mind, the value of the layout property will also be the name of a component that you will create in a little bit.

root/README.md

---
layout: BasicLayout
---

This layout property directly corresponds with a component of the same name in the .vuepress/components/ directory.

.vuepress/components/BaseLayout.vue

<template...