I'm trying to render a Single File Vue Component from a render function but it isn't being created. I tried variations similar to:
// simple.vue
<template>
...
</template>
<script>
...
</script>
// parent.vue
<script>
import Simple from
export default {
name: "parentComponent",
render: function (h) {
return h(
"div",
null,
Simple // [Simple], Vue.component(Simple)
}
}
</script>
How can I build Vue components from render functions? If it makes a difference I'm also using pug.
Each Vue component implements a render function. Most of the time, the function will be created by the Vue compiler. When you specify a template on your component, the content of this template will be processed by the Vue compiler that will return a render function.
Vue Single-File Components (a.k.a. *.vue files, abbreviated as SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.
You can run vue-loader on modules as you require them using vue-node. Add the following: const hook = require('vue-node'); const { join } = require('path'); // Pass an absolute path to your webpack configuration to the hook function.
Single File Components(SFCs) are a style of application organization used by JavaScript UI libraries where each file represents a single component in all aspects. Typically they resemble an HTML document where you have HTML tags, Style Tag, and Script Tag all in a file.
If I understand correctly, you simply want to render components that may be written as single file components from a render function. This is easy to do.
Let's assume I have the following single file component.
Child.vue
<template>
<h1>This is the Child component</h1>
</template>
And I want to render that from a component that uses a render function. Here is an example that does that.
Parent.js
import Child from "./Child.vue"
export default {
render(h){
return h("div", ["Text in Parent", h(Child)])
},
components: {Child}
}
Here is a working example.
The important parts to note is that when you want to render a component, you simply pass the component definition as the first argument to the createElement
function (above aliased as h
). This is what @Phil was pointing out in the comments. h(Child)
creates a child component. Technically it creates a virtual node, which Vue uses to render an instance of the component.
All of this is covered well in the documentation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With