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

Modify the content in the v-navigation-drawer upon clicking

Exploring the power of Vue i18n for prop translations in Vue applications

Are there any situations in which subscribing to an RXJS Observable does not result in either a success or error response

handling axios retries in main.js within a Vue.js application

I am having difficulty toggling text within a for loop in JavaScript

Exploring the architecture of Redux-thunk and validating the impact of side effects

Troubleshooting problems with dynamic imported asset URLs in Vue and Vitest snapshot snapshots

Decode PDF417 barcode images with ease using HTML and JavaScript on both desktop and mobile web browsers

Show only the present y-coordinate in the ToolTip of a chart.js

Encountered an error while trying to run npm start

AntD Functional Component with Row Selection Feature

What is the best way to combine multiple periods into a single range?

Error occurs when trying to create or delete a folder in Express.js

Encountering an error when attempting to access undefined property while using a method as a callback

Stop working to $(this) in jquery when clicking outside

Having trouble invoking html2canvas within an AngularJS app

"Exploring the power of asynchronous programming with dynamic async await in

I plan to compile a collection of names in a text field and then have the ability to select and access each name individually with just a click

Breaking apart field values in React Final Form

Error code 400 encountered during an HTTP POST request - issue stems from incorrect design of views and serializers