What is the best method to display a component using a string in Vue 3?

Question

What is the best method to display a component using a string in Vue 3?

I've been attempting to render a component from a string without success. Here are my codes:

<template>
<div v-html="beautifyNotification(notification)"></div>
</template>

<script>
import { Link } from '@inertiajs/inertia-vue3'
import {compile,h} from "vue"

export default {
    components: {
    },
    props: {
        notifications: Object
    },
    methods: {
        beautifyNotification (ntfction) {
            return h(compile(`<Link :href="`+ntfction.from.username+`"
                    class="h6 notification-friend">`+ntfction.from.name+`
            </Link>, commented on your new
            <Link href="#" class="notification-link">profile status</Link>.`))
        },
    }
}
</script>

I attempted to render the component using h and compile but it resulted in object object

javascript vue.js

Answer 1

Answer №1

If you've stumbled upon this in search of a solution, fear not! I've traversed the treacherous path of incorrect answers so you don't have to (it's surprising how many supposed Vue 3 solutions out there just don't cut it). Even sought help from the 'advanced' realm of Vue Discord, only to be met with strange and inaccurate responses.

Even the answer provided by Maembe didn't do the trick for me (lacked access to other components/scope).

Here is the flawless solution that worked wonders for me:

Behold my CompiledContent component, capable of handling a blend of HTML and Vue components within a single string fetched from the backend.

Note that it doesn't rely on the compile function at all.

<script>
import { h } from 'vue';
import AppAlert from '@/components/AppAlert.vue';

export default {
  props: {
    content: {
      type: String,
      default: '',
    },
  },
  render() {
    const r = {
      components: {
        AppAlert,
      },
      template: `<div class="content">${this.content || ''}</div>`,
      methods: {
        hello() {
          // method "hello" is also available here
        },
      },
    };
    return h(r);
  },
};
</script>

If your content includes numerous components, consider converting them all into asynchronous components:

components: {
  AppAlert: defineAsyncComponent(() => import('@/components/AppAlert.vue')), 
  ...

Answer 2

If you've stumbled upon this in search of a solution, fear not! I've traversed the treacherous path of incorrect answers so you don't have to (it's surprising how many supposed Vue 3 solutions out there just don't cut it). Even sought help from the 'advanced' realm of Vue Discord, only to be met with strange and inaccurate responses.

Even the answer provided by Maembe didn't do the trick for me (lacked access to other components/scope).

Here is the flawless solution that worked wonders for me:

Behold my CompiledContent component, capable of handling a blend of HTML and Vue components within a single string fetched from the backend.

Note that it doesn't rely on the compile function at all.

<script>
import { h } from 'vue';
import AppAlert from '@/components/AppAlert.vue';

export default {
  props: {
    content: {
      type: String,
      default: '',
    },
  },
  render() {
    const r = {
      components: {
        AppAlert,
      },
      template: `<div class="content">${this.content || ''}</div>`,
      methods: {
        hello() {
          // method "hello" is also available here
        },
      },
    };
    return h(r);
  },
};
</script>

If your content includes numerous components, consider converting them all into asynchronous components:

components: {
  AppAlert: defineAsyncComponent(() => import('@/components/AppAlert.vue')), 
  ...

Answer 3

Answer №2

Despite the delayed response, I am here to address this question utilizing the static compilation method.

Advantages:

Fast and less CPU intensive: Utilizes native compilation rather than including the heavy Vue compiler in your package
Saves memory: This method only uses Vue's prototype functions, avoiding memory consumption from including the compiler

Drawbacks:

Does not support SFC syntax: As a native compiler, it does not accept regular {{ value }}, though you can add one. It supports event syntax @click=... and component prop support with reluctance


import { Fragment, h, Component, defineComponent } from "Vue"

// Functions for building elements and compiling children
...

export function compiler(html: string, components: Record<string, Component>) {
  // Compiles HTML using given components
  ...
}

A simplified version for those unfamiliar with Vue's low-level APIs who would typically use openBlock

Demo links:

https://i.stack.imgur.com/oy0Oo.png

View Demo

Answer 4

Despite the delayed response, I am here to address this question utilizing the static compilation method.

Advantages:

Fast and less CPU intensive: Utilizes native compilation rather than including the heavy Vue compiler in your package
Saves memory: This method only uses Vue's prototype functions, avoiding memory consumption from including the compiler

Drawbacks:

Does not support SFC syntax: As a native compiler, it does not accept regular {{ value }}, though you can add one. It supports event syntax @click=... and component prop support with reluctance


import { Fragment, h, Component, defineComponent } from "Vue"

// Functions for building elements and compiling children
...

export function compiler(html: string, components: Record<string, Component>) {
  // Compiles HTML using given components
  ...
}

A simplified version for those unfamiliar with Vue's low-level APIs who would typically use openBlock

Demo links:

https://i.stack.imgur.com/oy0Oo.png

View Demo

Answer 5

Answer №3

It seems that the h function is being misused in this instance. The h() should be returning a virtual node intended for use within a render() function rather than a template. Therefore, there is no need for a <template> or <v-html> at all in this scenario:

//no template element
<script>
import { Link } from '@inertiajs/inertia-vue3'
import {compile,h} from "vue"

export default {
    props: {
        notifications: Object
    },
    render() {
        return h(
           // abbreviated template string used for concise representation
           compile('<Link href="#" class="notification-link">profile status</Link>')
        ) 
    }
}
</script>

Answer 6

It seems that the h function is being misused in this instance. The h() should be returning a virtual node intended for use within a render() function rather than a template. Therefore, there is no need for a <template> or <v-html> at all in this scenario:

//no template element
<script>
import { Link } from '@inertiajs/inertia-vue3'
import {compile,h} from "vue"

export default {
    props: {
        notifications: Object
    },
    render() {
        return h(
           // abbreviated template string used for concise representation
           compile('<Link href="#" class="notification-link">profile status</Link>')
        ) 
    }
}
</script>

What is the best method to display a component using a string in Vue 3?

Answer №1

Answer №2

Advantages:

Drawbacks:

Answer №3

Similar questions

What could be causing the unexpected behavior of angular.isNumber()?

Slider handle for Material UI in React component reaches the range value

What are the drawbacks of calling async/await within a fresh Promise() constructor?

Is it possible in Vue.js to create a reactive functionality for a button using a watcher for "v-if" condition?

Invoke `setState` function in contexts outside of React framework

Implementing JavaScript to Activate Radio Button on Mouse Click

Enhancing Your WordPress Menu with Customized Spans

Is it possible to alter the source of a component in Vue.js routes based on different environments using an 'if'

What causes the index link to break when react-router's setRouteLeaveHook is used?

Building Your Own Array Object in JavaScript

"What is the process for developing a Web-component with Vue and typescript that can be used in

There appears to be a JavaScript validation error occurring on the current page, however, you are able

The functionality of the React Router DOM seems to be malfunctioning

Transfer a term to a different division - JavaScript Object Model

What is the best way to retrieve the value of an input field in React when incorporating Material UI components?

Steps to fix issues with Cross-Origin Read Blocking (CORB) preventing cross-origin responses and Cross Origin errors

Troubleshooting: Issues with JQuery validation for cross-domain URLs

Navigating a secure Koa authentication flow using compose mechanism

Issues with displaying HTML5 audio player in iOS Chrome and Safari browsers

Is there a way to obtain the component code prior to compiling in Vue2.x?