Creating Virtual Nodes from a string with HTML tags in Vue 2.5: A Step-by-Step Guide

Question

Creating Virtual Nodes from a string with HTML tags in Vue 2.5: A Step-by-Step Guide

Having some trouble creating a functional component that displays the Feather Icons package - I'm stuck on the final step. Here's what I have so far:

This is my FeatherIcon.vue component.

<script>
const feather = require("feather-icons");

export default {
  components: {},
  props: {
    type: {
      required: true,
      type: String
    }
  },
  mounted() {},
  render(createElement) {
    return createElement(
      "svg",
      {attrs: feather.icons[this.type].attrs },
      feather.icons[this.type].contents
    );
  }
};
</script>

In Vue documentation, it says that the 3rd argument should be either:

// {String | Array}
// Children VNodes, built using `createElement()`,
// or using strings to get 'text VNodes'. Optional.

However, the value of my 3rd argument feather.icon[this.type].contents is a string containing the "innerHTML" inside the svg tag:

"<line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path>"

So my question is, how can I convert feather.icon[this.type].contents into a set of VNodes?

I've attempted using DOMParser and parseFromString but haven't had any success. Any suggestions?

javascript vue.js

Answer 1

Answer №1

You have the option to utilize the domProps property within the data object.

This feature enables you to bind standard HTML attributes and DOM properties like innerHTML (replacing the v-html directive).

Below is an illustration.

console.clear()

const content = `
  <line x1="6" y1="3" x2="6" y2="15"></line>
  <circle cx="18" cy="6" r="3"></circle>
  <circle cx="6" cy="18" r="3"></circle>
  <path d="M18 9a9 9 0 0 1-9 9"></path>
`

new Vue({
  el: "#app",
  render(h){
    return h("svg", {domProps:{innerHTML: content}})
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app"></div>

In your scenario, simply assign innerHTML to the feather's content.

Moreover, if you lack a template, typically, a standalone javascript file suffices. A single file component isn't necessary. Hence, your component could be as follows:

FeatherIcon.js

const feather = require("feather-icons");

export default {
  props: {
    type: {
      required: true,
      type: String
    }
  },
  render(createElement) {
    return createElement(
      "svg",
      {
        attrs: feather.icons[this.type].attrs,
        domProps: {
          innerHTML: feather.icons[this.type].content
        }
      });
  }
};

Lastly, if you aim to convert this into a functional component, you can implement something like this:

const FeatherIcon = {
  functional: true,
  props: {
    type: {
      required: true,
      type: String
    }
  },
  render(h, context){
    const {contents, attrs} = feather.icons[context.props.type]
    return h("svg", {attrs, domProps: {innerHTML: contents}})
  }
};

Here is a demonstration of it in action.

console.clear()

const FeatherIcon = {
  functional: true,
  props: {
    type: {
      required: true,
      type: String
    }
  },
  render(h, context){
    const {contents, attrs} = feather.icons[context.props.type]
    return h("svg", {attrs, domProps: {innerHTML: contents}})
  }
};

new Vue({
  el: "#app",
  components: {
    FeatherIcon
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<div id="app">
  <feather-icon type="eye"></feather-icon>
  <feather-icon type="activity"></feather-icon>
  <feather-icon type="award"></feather-icon>
</div>

Answer 2

You have the option to utilize the domProps property within the data object.

This feature enables you to bind standard HTML attributes and DOM properties like innerHTML (replacing the v-html directive).

Below is an illustration.

console.clear()

const content = `
  <line x1="6" y1="3" x2="6" y2="15"></line>
  <circle cx="18" cy="6" r="3"></circle>
  <circle cx="6" cy="18" r="3"></circle>
  <path d="M18 9a9 9 0 0 1-9 9"></path>
`

new Vue({
  el: "#app",
  render(h){
    return h("svg", {domProps:{innerHTML: content}})
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app"></div>

In your scenario, simply assign innerHTML to the feather's content.

Moreover, if you lack a template, typically, a standalone javascript file suffices. A single file component isn't necessary. Hence, your component could be as follows:

FeatherIcon.js

const feather = require("feather-icons");

export default {
  props: {
    type: {
      required: true,
      type: String
    }
  },
  render(createElement) {
    return createElement(
      "svg",
      {
        attrs: feather.icons[this.type].attrs,
        domProps: {
          innerHTML: feather.icons[this.type].content
        }
      });
  }
};

Lastly, if you aim to convert this into a functional component, you can implement something like this:

const FeatherIcon = {
  functional: true,
  props: {
    type: {
      required: true,
      type: String
    }
  },
  render(h, context){
    const {contents, attrs} = feather.icons[context.props.type]
    return h("svg", {attrs, domProps: {innerHTML: contents}})
  }
};

Here is a demonstration of it in action.

console.clear()

const FeatherIcon = {
  functional: true,
  props: {
    type: {
      required: true,
      type: String
    }
  },
  render(h, context){
    const {contents, attrs} = feather.icons[context.props.type]
    return h("svg", {attrs, domProps: {innerHTML: contents}})
  }
};

new Vue({
  el: "#app",
  components: {
    FeatherIcon
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<div id="app">
  <feather-icon type="eye"></feather-icon>
  <feather-icon type="activity"></feather-icon>
  <feather-icon type="award"></feather-icon>
</div>

Creating Virtual Nodes from a string with HTML tags in Vue 2.5: A Step-by-Step Guide

Answer №1

Similar questions

Having trouble retrieving property from an object while using Vue-MultiSelect during the select event

results vary when using both a while loop and callback

Is there a way to prevent Express.js from triggering a file download in the browser?

Issue with fetching data using Tanstack query in Vue 3 with parameters is not resolved

I am experiencing difficulty typing continuously into the input box in reactJS

React not displaying wrapped div

Learn the secrets of displaying a pop-up alert message seamlessly without interrupting the page's rendering process. Additionally, discover how to effortlessly refresh a chart every

Express 4: The requested route was not found by the router

Using the fetch method to consume a RapidAPI JSON response

What could be causing issues with my Ajax and JavaScript functionality?

The default theme has not been specified in Tailwind CSS

How can I pass a dynamic scope variable to a JavaScript function in AngularJS that is being updated within an ng-repeat loop?

How to implement jquery select functionality on clickable table rows?

The progress bar for uploading a file is causing issues with the redirect function in the

Numpad functionality in JQuery malfunctioning post-ajax request

Commitment within a forEach iteration

Efficiently encode and decode JSON data between PHP and JavaScript

Eliminate repeated elements within a JSON dataset to create a consolidated array

Encounter an error parsing the package.json file. Confirmed that it is valid JSON

Select component experiencing issue with Material Ui label breaking