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

Meteor - An error occurred in the Subscription Publish Function because it returned an array of non-Cursors

CSRF Token currently disabled

Resolving issues with setting up d3.js in the 'Creating a Custom Map' guide

Converting an Array with Key-Value pairs to a JSON object using JavaScript

AngularJS filtering with multiple conditions

Show Pop in relation to modified Text

By setting `queue: false` when calling jQuery's `show()` method, you can

Inquiring about socket.io: How can an io emit its own signal?

The challenge of loading multiple objects asynchronously in three.js

Utilizing Visual Studio: Implementing jsmin in post-build actions

Experiencing troubles when trying to execute npm run serve with vue/cli

Should I fork and customize npm package: Source or Distribution? How to handle the distribution files?

Tips for accessing hidden field values in a second jsp page

Utilize Express Node to display API information on HTML pages using Handlebars template

Tracking dynamic collections in AngularJS ng-repeat using track by

Creating an object property conditionally in a single line: A quick guide

Concealing items by placing them strategically between the camera and certain objects in Three.js

Step-by-step guide on dynamically adding "Input Tags" to the DOM at runtime using Selenium's JavascriptExecutor

Ways to detect when the window printing process has been completed

When attempting to set the keyPath using a variable, an error occurs stating that the keyPath option is not a valid key path