Dynamically create a component in Vue JS

Question

I need to create a component in Vue JS dynamically on click and then route to that component. I am using Vue 3. Everything needs to happen in one click. My code looks something like this

methods:{
  routerClick(value){
    console.log("number is "+value)
    this.$router.push({path:'New', name:'New', component: ()=>Vue.component('New')})
  }
},

I do not need to move a component that is already created. I want to create a component inside this method and then route to the component using this router. Please, any suggestions will be highly appreciated.

you can start with the [official documentation](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components). If you encounter any problems, feel free to ask focused questions. no one will do all the work for you — Igor Moraru, Apr 27 '22 at 15:28
I am not asking anyone to do the work. I am doing the work. In the documentation the components are already created. My problem is I have to create the component on click of a router link and I cannot even find a documentation on this. My code looks something like this methods:{ routerClick(value){ console.log("number is "+value) this.$router.push({path:'New', name:'New', component:()=>Vue.component('New')}); } }, — Samanja Cartagena, Apr 27 '22 at 15:36
Please edit your question if you want to share some snippet of code (highly welcome). Do you need to create the component directly or just move and load it there? For the first case, a [render function](https://vuejs.org/guide/extras/render-function.html#render-functions-jsx) can be quite handy, [dynamic components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components) are also a thing. Then, you can do cool things with Vue router + lazy loading components. — kissu, Apr 27 '22 at 15:42

Igor Moraru · Accepted Answer · 2022-04-27T17:05:49.483

Below is a simplistic solution that works (I'm not an expert in Vue 3).

The main point is to use addRoute before pushing to it, because you cannot specify the route component when pushing to a route.

Here is the codesandbox with the working solution.

 <template>
  <router-link to="/">Home</router-link>
  <button @click="createComponent">Create Component</button>

  <router-view></router-view>
</template>

<script>
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "App",
  setup() {
    const app = getCurrentInstance().appContext.app;
    const router = useRouter();

    const createComponent = () => {
      // Check if the component has been alreadey registered
      if (!app.component("NewComponent")) {
        app.component("NewComponent", {
          name: "NewComponent",
          template: `<div>This is a new component</div>`
        });
      }

      const newComponent = app.component("NewComponent");
      // Adding a new route to the new component
      router.addRoute({ path: "/new", component: newComponent });

      router.push("/new");
    };
    return {
      createComponent,
    };
  },
};
</script>

Dynamically create a component in Vue JS

1 Answers1