Transform HTML into a Vue component dynamically during runtime

Question

Transform HTML into a Vue component dynamically during runtime

Currently, I am in the process of learning Vue and working on a simple wiki page project. The raw article data is stored in a JSON file written using custom markup. For example, the following markup: The ''sun'' is {r=black black} should be translated as follows:

<p>The <b>sun</b> is <Ref path="/black">black</p>

I have managed to achieve this using regular expressions and string manipulation techniques. However, I cannot use this processed string as a template option because it only works with static inputs. If it were pure HTML, I could have utilized the v-html directive or similar methods. My current template fetches the JSON file and interprets my custom markup based on preset criteria. It then generates a string containing Vue markup, which unfortunately cannot be assigned to the 'template' options due to its restriction to static strings and inability to recognize variables.

I attempted assigning the template options with a pre-compiled Vue markup or utilizing a runtime compiler mechanism. Yet, I may be misunderstanding something. Any suggestions on how I can proceed?

javascript vue.js markup

Answer 1

Answer №1

To compile a Vue template, use the compile() function and insert it into your current template using <Component>. Additionally, remember to update the alias import from 'vue' to 'vue/dist/vue.esm-bundler.js' in vite.config.js to enable this functionality.

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

Modified files after running npm create vue@latest:

App.vue

<script setup>

import { ref, compile } from 'vue';

const msg = ref('Hello world!');
const component = ref(compile('<HelloWorld :msg="msg"></HelloWorld>'));

</script>

<template>
    <main>
        <Component :is="component" :msg="msg"></Component>
    </main>
</template>

main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'


const app = createApp(App);
import HelloWorld from './components/HelloWorld.vue'
app.component('HelloWorld', HelloWorld);
app.mount('#app')

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
            vue: 'vue/dist/vue.esm-bundler.js',
        }
    }
})

Answer 2

To compile a Vue template, use the compile() function and insert it into your current template using <Component>. Additionally, remember to update the alias import from 'vue' to 'vue/dist/vue.esm-bundler.js' in vite.config.js to enable this functionality.

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

Modified files after running npm create vue@latest:

App.vue

<script setup>

import { ref, compile } from 'vue';

const msg = ref('Hello world!');
const component = ref(compile('<HelloWorld :msg="msg"></HelloWorld>'));

</script>

<template>
    <main>
        <Component :is="component" :msg="msg"></Component>
    </main>
</template>

main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'


const app = createApp(App);
import HelloWorld from './components/HelloWorld.vue'
app.component('HelloWorld', HelloWorld);
app.mount('#app')

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
            vue: 'vue/dist/vue.esm-bundler.js',
        }
    }
})

Transform HTML into a Vue component dynamically during runtime

Answer №1

Similar questions

The slider thumb is not showing up properly on Microsoft Edge

Simple solution for storing key-value pairs temporarily in a form using JQuery

Placing the video at the center of the background image

Combining strings with JQuery

Showing how to make an element visible in Selenium and Python for file uploading

Managing business logic in an observable callback in Angular with TypeScript - what's the best approach?

Automatically selecting the map center while using the Drawing Manager feature for placing markers

Brand new Laravel 9 setup featuring a vue 3 scaffold, but encountering issues with vite not displaying components

Attempting to incorporate country flags into the Currency Converter feature

Tips for ensuring the validity of data in an AJAX request

Exploring the Significance of jQuery in a Real-

Hiding the modal once the data has been successfully transmitted to the database

Error with Expression Engine: PHP function cannot be executed

Tips for designing a sophisticated "tag addition" feature

Exploring the Live Search Functionality on an HTML Webpage

Pass along a variable with either "&" or "%" to a PHP file utilizing JavaScript

Utilizing CSS classes based on subelements

Ways to retrieve the value of a specific key within an object nested within another object

Learn how to manipulate Lit-Element TypeScript property decorators by extracting values from index.html custom elements

Creating images with LibCanvas