Mounting the User Interface ​

The user interface integrates into JavaScript environments like Vue, React, Angular, or vanilla JavaScript. This guide covers initializing the internal Vue instance and mounting the interface to a DOM element.

Internal Vue Instance ​

The framework provides an export for initializing the internal Vue instance. To utilize this functionality, first import the createMfxApp function from the MFX package:

import { createMfxApp } from '@visiontree/mfx-auto-renderer'

const autoRendererApp = createMfxApp()

The createMfxApp function will return a Vue instance ready to be mounted.

Mounting the Auto Renderer UI ​

To mount Vue instance, you'll need an HTML DOM element to serve as a mounting point. In your HTML file, create a div element with a unique ID:

<div id="mfx-auto-renderer"></div>

Then, use the app instance's mount method to mount the UI to the DOM element:

autoRendererApp.mount('#mfx-auto-renderer')

Now, the Visiontree Auto Renderer UI will be mounted and displayed within the specified DOM element.

Running the Application in Different JavaScript Environments ​

While the Auto Renderer is built on Vue, it can be integrated into other JavaScript environments, such as React or Angular, with minimal adjustments. Simply follow the standard practices for incorporating third-party components or libraries in your chosen environment.

For example, to use the Visiontree Auto Renderer in a React application, you might create a React wrapper component to manage the Vue instance's lifecycle and DOM interactions.

Integration Examples ​

• Embedding in a .NET Application
• Integrating with a React Application
• More coming soon!