Book Image

Vue.js Quick Start Guide

By : Ajdin Imsirovic
Book Image

Vue.js Quick Start Guide

By: Ajdin Imsirovic

Overview of this book

Vue.js is the latest trending frontend framework. Simplicity, reactivity, and ?exibility are some of the key benefits that Vue offers to developers. This book will help you learn everything you need to know to build stunning reactive web apps with Vue.js 2 quickly and easily. This book will take you through the Vue 2 framework. You will start by learning the different Vue installation options: CDN, NPM, and Vue CLI. Then we will look at the core concepts of Vue: templates and components – ways to modularize Vue code. You will learn how to utilize directives, which are Vue-specific HTML attributes with additional features. Also, you will see how Vue uses a streamlined approach to development, with reusable methods, computed properties, and watchers, and how it controls state with the help of its data option. You will learn about the concepts of reactive programming in Vue, and how to understand communication between parent and child components. We will take a look at props and slots, working with CSS, filters, and mixins. We will also look at ways to add transitions and animations to Vue apps. Then you will extend Vue by building custom directives and your own plugins. Finally, you will learn about Vuex – a Vue plugin that allows us to centralize state, and also introduce Nuxt, which is a framework that builds on top of Vue and solves some issues of single-page applications. After learning about these components, you will be ready to build your own reactive web apps with Vue.js 2.
Table of Contents (15 chapters)
Title Page
Copyright and Credits
Packt Upsell

Installing Nuxt.js and previewing the default project

To serve different routes, in the background Nuxt.js uses Vue-router. To keep things simple, we'll focus on using Nuxt.js.

There are a few ways to get started with Nuxt.js. One option is via the vue init command. Another one is with a practice that is common, which is the create-nuxt-app command, similar to create-elm-app or create-react-app.

Installing Nuxt.js with the vue init command

Let's begin by finding a location on our drive to save our new Nuxt app, and then use the vue init command to create it:

vue init nuxt-community/stater-template chapter8

Running this command without vue init being installed might return the following message in the console:

Command vue init requires a global addon to be installed. 
Please run yarn global add @vue/cli-init and try again.

Hence, to rectify the issue, simply run this:

yarn global add @vue/cli-init

This will take some time, but ultimately we'll end up being able to run the vue init command: 

vue init...