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>
CodePudding user response:
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())
}
});