How to pass component in v-html vuejs nuxt

Question

I need to show components that are passed through props and output them through v-html. I found a render solution. But I can't figure out how to apply this in a local component, because I'm using nuxt. Vue.compile(this.vcontent); give an error

<script>
export default {
  props: ['vcontent'],
  data() {
    return {
      templateRender: null,
    }
  },
  render(h) {
    if (!this.templateRender) {
      return h('div', 'loading...');
    } else { // If there is a template, I'll show it
      return this.templateRender();
    }
  },
  watch: {

    vcontent:{
        immediate: true, // makes the watcher fire on first render, too.
      handler() {
        var res = Vue.compile(this.vcontent);

        this.templateRender = res.render;
        
        // staticRenderFns belong into $options, 
        // appearantly
        this.$options.staticRenderFns = []
        
        // clean the cache of static elements
        // this is a cache with the results from the staticRenderFns
        this._staticTrees = []
        
        // Fill it with the new staticRenderFns
        for (var i in res.staticRenderFns) {
          //staticRenderFns.push(res.staticRenderFns[i]);
          this.$options.staticRenderFns.push(res.staticRenderFns[i])
        }
      }
    }
  },
}
</script>

if im trying to import Vue in component, webpack gives an error vue__WEBPACK_IMPORTED_MODULE_0___default.a.compile is not a function

DengSihan · Accepted Answer · 2023-06-09 07:51:25Z

2

nuxt.config.js

    // if you are using webpack
    build: {
        extend(config, ctx){
            config.resolve.alias['vue'] = 'vue/dist/vue.common';
        }
    },
    
    // if you are using vite
    vite: {
        resolve: {
            alias: {
                'vue': 'vue/dist/vue.common'
            }
        },
    }

In your component which has component string in content my-component.js

import Btn from '~/components/btn.vue';
export default{
    props: ['vcontent'],
    render(h){
        let self = this;
        return h({
            components: {
                Btn
            },
            template: self.vcontent
        });
    }
}

2023/06/09 updated:

v-runtime-template for Vue2/Nuxt2
vue3-runtime-template for Vue3/Nuxt3

could be a vanilla and SSR-friendly solution

edited Jun 9, 2023 at 7:51

answered Jul 7, 2021 at 3:00

DengSihan

3,0762 gold badges23 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 02:02:02Z

0

By default, the Vue compiler is not included, so Vue.compile is not defined, but you can enable it in your Nuxt config by aliasing vue to the "full" build:

// nuxt.config.js
export default {
  build: {
    extend(config, ctx) {
      config.resolve.alias['vue'] = 'vue/dist/vue.common'
    }
  }
}

It also seems the watch handler needs to wait until the $nextTick before actually calling Vue.compile:

// MyComponent.vue
export default {
  watch: {
    vcontent: {
      immediate: true,
      async handler() {
        await this.$nextTick()
        const res = Vue.compile(this.vcontent)
        //...
      }
    }
  }
}

demo

edited Jul 16, 2022 at 2:02

answered Jul 7, 2021 at 1:52

tony19

140k23 gold badges281 silver badges354 bronze badges

Collectives™ on Stack Overflow

How to pass component in v-html vuejs nuxt

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related