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

The ChromeDriver capabilities that have been configured are not maintained once the WebDriver is constructed in Node Selenium

Mastering the art of iterating through a JSON response

Exploring Vue 3: Unpacking examples within the setup function and implementing them within the Setup tag

Create a drag-and-drop interface and link elements together using a custom JavaScript library

What are the steps to troubleshooting using VS Code and Chrome browser with Webpack?

Ways to assign an identification attribute to HTML elements within innerHTML

What is the process for setting up a server with Node.js?

vue implementing autoscroll for long lists

Update the form action URL when a specific option is selected from the dropdown menu upon clicking the submit

Exploring the power of Angular by implementing nested ng-repeat functionalities:

children blocking clicks on their parents' divs

Reactive Form value is not displaying in view because of FormControlName issue

Creating a div resizing function using only JavaScript is a fun and useful project to tackle

When the button is clicked, send data using 'POST' method to the php file and fetch

What is the best way to share image data between pages in Next.js?

Guide on developing a Vue modal for transferring user input to a separate component

Error alert: The function name used in the import statement is not defined

Accessing data from an API in an AngularJS dropdown menu

Oops! You're trying to perform actions that must be plain objects. If you need to handle async actions

The Vue EventBus does not support passing object attributes