how to fix createElement is not a function in vue 3?

user_11340462 0
Viewed 30

I've got below code, which I used it in Vue 2 projects to add dynamic styles to components, and when I tried to use it in Vue 3, I've got createElemenet is not a function error.

In Vue 2 :

app.js
Vue.component('v-style', {
    render: function (createElement) {
        return createElement('style', this.$slots.default)
    }
});

In Vue 3 :

app.js
app
    .component('err-text', ErrorText)
    .component('v-style', {
    render: function (createElement : any) {
        return createElement('style', this.$slots.default)
    }
});

The result of above code provide me option to add my styles like below :

<template>
 <v-style>
   .foo {
    color: red;
   }
 </v-style>
</template>
vuejs2 vuejs3 vue.js
1 Answers

In vue 3 createElement is replaced by the h function imported from vue :

import {h} from 'vue'

app.component('err-text', ErrorText)
    .component('v-style', {
    render: function () {
        return h('style', this.$slots.default())
    }
});
user_81728570
Related