Nuxt render function for a string of HTML that contains Vue components

Question

I'm trying to solve this for Nuxt

Codesandbox of a WIP not working: https://codesandbox.io/s/zw26v3940m

OK, so I have WordPress as a CMS, and it's outputting a bunch of HTML. A sample of the HTML looks like this:

'<h2>A heading tag</h2>
<site-banner image="{}" id="123">Slot text here</site-banner>
<p>some text</p>'

Notice that it contains a Vue component <site-banner> that has some props on it (the image prop is a JSON object I left out for brevity). That component is registered globally.

I have a component that we wrote, called <wp-content> that works great in Vue, but doesn't work in Nuxt. Note the two render functions, one is for Vue the other is for Nuxt (obviously this is for examples sake, I wouldn't use both).

export default {
    props: {
        html: {
            type: String,
            default: ""
        }
    },
    render(h, context) {
        // Worked great in Vue
        return h({ template: this.html })
    }      
    render(createElement, context) {
        // Kind of works in Nuxt, but doesn't render Vue components at all
        return createElement("div", { domProps: { innerHTML: this.html } })
    } 
}

So the last render function works in Nuxt except it won't actually render the Vue components in this.html, it just puts them on the page as HTML.

So how do I do this in Nuxt? I want to take a string of HTML from the server, and render it on the page, and turn any registered Vue components into proper full-blown Vue components. Basically a little "VueifyThis(html)" factory.

One idea I had was trying to turn the HTML "string" into just a JSX template (by removing the " from the string basically). But I'm not sure that's possible, I couldn't figure it out. — Drew Baker
– Drew Baker, Commented May 6, 2019 at 23:47
That exact function that works in Vue, doesn't it work in nuxt? — acdcjunior
– acdcjunior, Commented May 9, 2019 at 5:39

Drew Baker · Accepted Answer · 2022-01-13 19:56:37Z

7

This was what worked and was the cleanest, thanks to Jonas Galvez from the Nuxt team via oTechie.

export default {
  props: {
    html: {
      type: String,
      default: ""
    }
  },
  render(h) {
    return h({
      template: `<div>${this.html}</div>`
    });
  }
};

Then in your nuxt.config.js file:

    build: {
        extend(config, ctx) {
            // Include the compiler version of Vue so that <component-name> works
            config.resolve.alias["vue$"] = "vue/dist/vue.esm.js"
        }
    }

edited Jan 13, 2022 at 19:56

answered May 17, 2019 at 4:30

Drew Baker

14.5k15 gold badges62 silver badges102 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 22:23:06Z

6

And if you use the v-html directive to render the html?

like:

<div v-html="html"></div>

I think it will do the job.

edited Jul 15, 2022 at 22:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 6, 2019 at 23:36

estevanj

3111 silver badge3 bronze badges

2 Comments

Drew Baker Over a year ago

No, that won't unpack the Vue components unfortunately.

estevanj Over a year ago

And if you use this one? alligator.io/vuejs/v-runtime-template

Romain Ortega · Accepted Answer · 2022-04-07 11:21:04Z

5

This is how I did it with Nuxt 3 :

<script setup lang="ts">
import { h } from 'vue';

const props = defineProps<{
  class: string;
  HTML: string
}>();
const VNode = () => h('div', { class: props.class, innerHTML: props.HTML })
</script>
<template>
  <VNode />
</template>

There was not need to update nuxt.config.ts.
Hopefully it will help some of you.

answered Apr 7, 2022 at 11:21

Romain Ortega

511 silver badge2 bronze badges

1 Comment

PayteR Over a year ago

Hm need to help with this, this is my no TS version ``` <template> <v-node /> </template> <script setup> import { h } from '@nuxtjs/composition-api' const VNode = () => h('div', { class: 'test-class', innerHTML: '<div>html test</div>' }) </script> ``` It gives me this error VNode is not defined, but it's definitely defined! Im using Nuxt v2 with @nuxtjs/composition-api

muka.gergely · Accepted Answer · 2019-05-15 18:55:00Z

4

Here's a solution on codesandbox: https://codesandbox.io/s/wpcontent-j43sp

The main point is to wrap the dynamic component in a <div> (so an HTML tag) in the dynamicComponent() template, as it can only have one root element, and as it comes from Wordpress the source string itself can have any number of top level elements.

And the WpContent component had to be imported.

edited May 15, 2019 at 18:55

answered May 15, 2019 at 18:46

muka.gergely

8,3593 gold badges20 silver badges35 bronze badges

2 Comments

Nouh Belahcen Over a year ago

thanks for this example for me didn't work with 'vue-feather-icons' did you have any idea why?

muka.gergely Over a year ago

What is exactly you were trying to do? Do you have your code online?

AXE · Accepted Answer · 2019-05-15 14:52:14Z

0

I made some changes to your codesandbox. seems work now https://codesandbox.io/s/q9wl8ry6q9

Things I changed that didn't work:

template can only has one single root element in current version of Vue
v-bind only accept variables but you pass in a string.

answered May 15, 2019 at 14:52

AXE

87510 silver badges14 bronze badges

Collectives™ on Stack Overflow

Nuxt render function for a string of HTML that contains Vue components

5 Answers 5

Comments

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related