Vue 3 — Render Functions Events and Plugins
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:30:25

---
title: Vue 3 — Render Functions Events and Plugins
published: true
date: 2020-07-28 01:15:40 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/28/vue-3%e2%80%8a-%e2%80%8arender-functions-events-and-plugins/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258arender-functions-events-and-plugins
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to create render functions and create plugins with Vue 3.

### Event Modifiers Equivalents

The event modifiers have the following equivalents.

They are:

- `.stop` — `event.stopPropagation()`
- `.prevent` — `event.preventDefault()`
- `.self` — `if (event.target !== event.currentTarget) return`
- `.enter` or `.13` — `if (event.keyCode !== 13) return`
- `.ctrl`, `.alt`, `.shift`, or  `.meta` — `if (!event.ctrlKey) return`

For example, we can use it by writing:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <custom-input></custom-input>
    </div>
    <script>
      const app = Vue.createApp({});

      app.component("custom-input", {
        render() {
          return Vue.h("input", {
            onKeyUp: event => {
              if (event.target !== event.currentTarget) return;
              if (!event.shiftKey || event.keyCode !== 23) return;
              event.stopPropagation();
              event.preventDefault();
              //...
            }
          });
        }
      });

      app.mount("#app");
    </script>
  </body>
</html>

```

We can call the plain JavaScript event methods and check their properties to add the modifier equivalents.

### Slots

The `this.$slots` lets us add slots to our Vue apps.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <custom-heading :level="1">foo</custom-heading>
    </div>
    <script>
      const app = Vue.createApp({});
      app.component("custom-heading", {
        render() {
          const { h } = Vue;
          return h(`h1`, {}, this.$slots.default());
        },
        props: {
          level: {
            type: Number,
            required: true
          }
        }
      });
      app.mount("#app");
    </script>
  </body>
</html>

```

to add or custom h1 element with a slot inside.

`this.$slots.default` is the default slot.

### JSX

We can also use JSX in our render functions if we install this [Babel plugin](https://github.com/vuejs/jsx).

This way, we can use the more convenient JSX syntax in our render functions.

For instance, we can write:

```
import AnchoredHeading from './AnchoredHeading.vue'

app.component("custom-heading", {
  render() {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
      );
    }
});

```

to write JSX instead of plain JavaScript in our render function.

### Plugins

Plugins are a self-contained code that can be reused.

They add global-level functionality in Vue.

They can add anything, which includes global methods or properties.

It can also include global assets and mixins.

Instance methods can also be added with plugins.

We can add plugins by exporting an object with the `install` method:

```
export default {
  install: (app, options) => {
    //...
  }
}

```

We can then add our own global properties by writing:

```
export default {
  install: (app, options) => {
    app.config.globalProperties.$foo = (key) => {
      return 'foo';
    }
  }
}

```

We can also inject other plugins within a plugin.

For instance, we can write:

```
export default {
  install: (app, options) => {
    app.config.globalProperties.$foo = (key) => {
      return 'foo';
    }

    app.provide('i18n', options);
  }
}

```

We can add global mixins and directives right into our plugin code with the `app.directive` and `app.mixin` methods:

```
export default {
  install: (app, options) => {
    app.config.globalProperties.$foo = (key) => {
      return 'foo';
    }

    app.provide('i18n', options)

    app.directive('my-directive', {
      bind (el, binding, vnode, oldVnode) {
        // some logic ...
      }
      ...
    })

    app.mixin({
      created() {
        //...
      }
      //...
    })
  }
}

```

To use a plugin, we call the `app.use` method:

```
app.use(myPlugin, options)

```

### Conclusion

There’re equivalents to directive event modifiers in render functions.

Render functions can also contain JSX if we add a plugin.

We can create plugins with various method calls.

The post [Vue 3 — Render Functions Events and Plugins](https://thewebdev.info/2020/07/28/vue-3%e2%80%8a-%e2%80%8arender-functions-events-and-plugins/) appeared first on [The Web Dev](https://thewebdev.info).