Working with Vue.js

By Jack Franklin, Michael Wanyoike, Ahmed Bouchefra and 5 more

Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is is now considered one of the primary front-end frameworks, and not without good reason. Its component-based architecture was designed to be flexible and easy to adopt, making it just as easy to integrate into projects and use alongside non-Vue code as it is to build complex client-side applications.

If you're an experienced developer looking to make a start with Vue, this book is for you. It provides a rapid introduction to the key topics that you'll need to understand. It contains:

• Getting up and Running with the Vue.js 2.0 Framework by Jack Franklin
• Getting Started with Vuex: a Beginner's Guide by Michael Wanyoike
• A Beginner's Guide to Vue CLI by Ahmed Bouchefra
• A Beginner's Guide to Working With Components in Vue by Kingsley Silas
• A Beginner's Guide to Working with Forms in Vue by Kingsley Silas
• How to Conditionally Apply a CSS Class in Vue.js by Chad Campbell
• How to Replace jQuery with Vue by Nilson Jacques
• Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps by Olayinka Omole
• Optimize the Performance of a Vue App with Async Components by Michiel Mulders

• Language: English
• Publisher: SitePoint
• Release date: Jun 6, 2019
• ISBN: 9781492071440

Jack Franklin

Jack is a JavaScript and Ruby Developer working in London, focusing on tooling, ES2015 and ReactJS.

Book preview

Preface

Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is is now considered one of the primary front-end frameworks, and not without good reason. Its component-based architecture was designed to be flexible and easy to adopt, making it just as easy to integrate into projects and use alongside non-Vue code as it is to build complex client-side applications.

If you're an experienced developer looking to make a start with Vue, this book is for you. It provides a rapid introduction to the key topics that you'll need to understand. It contains:

Getting up and Running with the Vue.js 2.0 Framework by Jack Franklin

Getting Started with Vuex: a Beginner’s Guide by Michael Wanyoike

A Beginner’s Guide to Vue CLI by Ahmed Bouchefra

A Beginner’s Guide to Working With Components in Vue by Kingsley Silas

A Beginner’s Guide to Working with Forms in Vue by Kingsley Silas

How to Conditionally Apply a CSS Class in Vue.js by Chad Campbell

How to Replace jQuery with Vue by Nilson Jacques

Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps by Olayinka Omole

Optimize the Performance of a Vue App with Async Components by Michiel Mulders

Who Should Read This Book?

This book is for developers with experience of JavaScript.

Conventions Used

Code Samples

Code in this book is displayed using a fixed-width font, like so:

A Perfect Summer's Day

It was a lovely day for a walk in the park.

The birds were singing and the kids were all back at school.

Where existing code is required for context, rather than repeat all of it, ⋮ will be displayed:

function animate() {

    ⋮

new_variable = Hello;

 

}

Some lines of code should be entered on one line, but we’ve had to wrap them because of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored:

URL.open("http://www.sitepoint.com/responsive-web-

➥design-real-user-testing/?responsive1");

You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

Tips, Notes, and Warnings

Hey, You!

Tips provide helpful little pointers.

Ahem, Excuse Me ...

Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.

Make Sure You Always ...

... pay attention to these important points.

Watch Out!

Warnings highlight any gotchas that are likely to trip you up along the way.

Chapter 1: Getting up and Running with the Vue.js 2.0 Framework

by Jack Franklin

As soon as the popular JavaScript framework Vue.js released v2, I was eager to give it a spin and see what it’s like to work with. As someone who’s pretty familiar with Angular and React, I was looking forward to seeing the similarities and differences between them and Vue.

Vue 2 sports excellent performance stats, a relatively small payload (the bundled runtime version of Vue weighs in at 30KB once minified and gzipped), along with updates to companion libraries like vue-router and Vuex, the state management library for Vue. There’s far too much to cover in just one article, but keep an eye out for some later articles where we’ll look more closely at various libraries that couple nicely with the core framework.

Inspiration from Other Libraries

As we go through this tutorial, you’ll see many features that Vue has that are clearly inspired by other frameworks. This is a good thing; it’s great to see new frameworks take some ideas from other libraries and improve on them. In particular, you’ll see Vue’s templating is very close to Angular’s, but its components and component lifecycle methods are closer to React’s (and Angular’s, as well).

One such example of this is that, much like React and nearly every framework in JavaScript land today, Vue uses the idea of a virtual DOM to keep rendering efficient. Vue uses a fork of snabbdom, one of the more popular virtual DOM libraries. The Vue site includes documentation on its Virtual DOM rendering, but as a user all you need to know is that Vue is very good at keeping your rendering fast (in fact, it performs better than React in many cases), meaning you can rest assured you’re building on a solid platform.

Components, Components, Components

Much like other frameworks these days, Vue’s core building block is the component. Your application should be a series of components that build on top of each other to produce the final application. Vue.js goes one step further by suggesting (although not enforcing) that you define your components in a single .vue file, which can then be parsed by build tools (we’ll come onto those shortly). Given that the aim of this article is to fully explore Vue and what it feels like to work with, I’m going to use this convention for my application.

A Vue file looks like so:

 

This is my HTML for my component

 

  export default {

    // all code for my component goes here

  }

 

  /* CSS here

  * by including `scoped`, we ensure that all CSS

  * is scoped to this component!

  */

Alternatively, you can give each element a src attribute and point to a separate HTML, JS or CSS file respectively if you don’t like having all parts of the component in one file.

Setting Up a Project

Whilst the excellent Vue CLI exists to make setting up a full project easy, when starting out with a new library I like to do it all from scratch so I get more of an understanding of the tools.

These days, webpack is my preferred build tool of choice, and we can couple that with the vue-loader plugin to support the Vue.js component format that I mentioned previously. We’ll also need Babel and the env preset, so we can write all our code using modern JavaScript syntax, as well as the webpack-dev-server, which will update the browser when it detects a file change.

Let’s initialize a project and install the dependencies:

mkdir vue2-demo-project

cd vue2-demo-project

npm init -y

npm i vue

npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

Then create the initial folders and files:

mkdir src

touch webpack.config.js src/index.html src/index.js

The project structure should look like this:

.

├── package.json

├── package-lock.json

├── src

│  ├── index.html

│  └── index.js

└── webpack.config.js

Now let’s set up the webpack configuration. This boils down to the following:

Tell webpack to use the vue-loader for any .vue files

Tell webpack to use Babel and the env preset for any .js files

Tell webpack to generate an HTML file for the dev-server to serve, using src/index.html as a template:

//webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

const HtmlWebPackPlugin = require(html-webpack-plugin)

 

module.exports = {

  module: {

    rules: [

      {

        test: /\.vue$/,

        loader: 'vue-loader',

      },

      {

        test: /\.js$/,

        exclude: /node_modules/,

        use: {

          loader: 'babel-loader',

          options: {

            presets: ['@babel/preset-env']

          }

        }

      }

    ]

  },

  plugins: [

    new VueLoaderPlugin(),

    new HtmlWebPackPlugin({

      template: