Vue 3 is in beta and it’s subject to change.
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.enteror.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.
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.
