Mounting a Vue3 component within an established application: Step-by-step guide

Question

Mounting a Vue3 component within an established application: Step-by-step guide

Imagine we have already mounted an App in main.js:

createApp(App).mount('#app');

Now, I want to create a function that is called like this:

createModal({
        render: () => <SomeComponent />,
    });

Typically, we would implement the function above by calling createApp(h(render)) and then mounting its instance wherever needed.

However, the issue arises when the modal instance does not inherit anything from the root App.

For example, if we use provide('root', 'here') in the root App and then call inject('root') in another App, we will not get the expected result of here.

Instead, the result will be undefined since the two Apps do not share the same context.

So, how can we rectify this issue and ensure everything functions correctly?

javascript vue.js vuejs3

Answer 1

Answer №1

Here are some suggestions:

const { createApp, reactive, toRefs, defineComponent, computed } = Vue;

const state = reactive({
  foo: 'bar'
})

createApp({
  setup() {
    const addNewApp = () => {
      const div = document.createElement('div');
      document.querySelector('#app').appendChild(div);
      createApp({
        setup: () => ({
          ...toRefs(state)
        }),
        template: `<h3>New Dynamic Child App</h3>
                   <input v-model="foo">`
      }).mount(div);
    };
    return {
      ...toRefs(state),
      addNewApp
    }
  }
}).mount('#app')

#app {
  border: 2px solid #f50;
  padding: 1rem;
}

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <input v-model="foo" />
  <button @click="addNewApp">Add New Dynamic App</button>
</div>

The key principles to note are:

Any app can access or modify a reactive state (...toRefs(state), in both apps)
An app can be placed in any <div>, even within another app.

You are able to have multiple apps that share the same reactive state. They can be completely independent in the DOM or nested within each other.

Answer 2

Here are some suggestions:

const { createApp, reactive, toRefs, defineComponent, computed } = Vue;

const state = reactive({
  foo: 'bar'
})

createApp({
  setup() {
    const addNewApp = () => {
      const div = document.createElement('div');
      document.querySelector('#app').appendChild(div);
      createApp({
        setup: () => ({
          ...toRefs(state)
        }),
        template: `<h3>New Dynamic Child App</h3>
                   <input v-model="foo">`
      }).mount(div);
    };
    return {
      ...toRefs(state),
      addNewApp
    }
  }
}).mount('#app')

#app {
  border: 2px solid #f50;
  padding: 1rem;
}

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <input v-model="foo" />
  <button @click="addNewApp">Add New Dynamic App</button>
</div>

The key principles to note are:

Any app can access or modify a reactive state (...toRefs(state), in both apps)
An app can be placed in any <div>, even within another app.

You are able to have multiple apps that share the same reactive state. They can be completely independent in the DOM or nested within each other.

Mounting a Vue3 component within an established application: Step-by-step guide

Answer №1

Similar questions

Why are my Bootstrap nav-tabs not showing tab-content in MVC?

Streamlining all icons to a single downward rotation

Allow AngularJS to make HTTP POST requests with CORS enabled

Implementing jQuery functionality on elements that are generated dynamically

How can I save files to the ~/Documents directory using Node.js on my Mac computer?

Specialized directive for preventing component creation

Receiving no communication from Express Router

What is the best way to ensure that the search box automatically adjusts its position and size regardless of the screen resolution?

Using Vue global variables within the <head> section of HTML documents

Updating the NODE_ENV variable in Cypress

Is it possible to center the image and resize it even when the window is resized?

Upon submitting the form, the dynamic dependent drop-down list fails to offer any available options

react dealing with clicking and blurring at the same time

What is the best method to collect information from multiple AJAX requests?

What is the reason behind the failure to update the state via a reducer and Object.assign?

Obtaining the Final Document Identifier for Paginating with valueChanges()

How can one effectively manage event handling for dynamically generated HTML elements?

How can I modify the color in vue-google-chart when a filter option is selected?

Passing variables dynamically in a created Express.js route

position property in div element disrupts slider functionality