17

Advanced Vue.js - Directives,

Plugins, and Render Functions

In this chapter, we will talk about the following topics:

Creating a new directive

Using WebSockets in Vue

Writing a plugin for Vue

Rendering a simple component manually

Rendering a component with children

Using JSX to render a component

Creating a functional component

Building a responsive table with higher-order components

Introduction

Directives and plugins are ways to package functionality in a reusable way and also make it
easily shareable across apps and teams; you will build a few of them in this chapter. Render

functions are how Vue really works under the hood to turn templates into the Vue
language and then into HTML and JavaScript again; they become useful if you need to

optimize the performance of your apps and work in some corner cases.

In general, you should avoid using these advanced functions when possible as they have
been a little overused in the past. Usually, many problems can be solved by simply writing

a good component and distributing the component itself; you should look at advanced
features only when this is not true.