[Vuejs]-Vue.js 3- Component doesn't load in VueJS with router

4πŸ‘

βœ…

The issue is in ../view/RegisterForm component which renders itself :

<template>
  <RegisterForm></RegisterForm><!-- this is the component itself not th child one-->
</template>

<script>
import RegisterForm from '@/components/Register-form';
export default {
  components: {
    RegisterForm
  },
  name: "RegisterForm"
}
</script>

<style scoped>
</style>

this generates an infinite loop, to solve this just change the name of imported component :

<template>
  <RegisterForm1></RegisterForm1>
</template>

<script>
import RegisterForm1 from '@/components/RegisterForm1';
export default {
  components: {
    RegisterForm1
  },
  name: "RegisterForm"
}
</script>

<style scoped>
</style>

1πŸ‘

change in App.vue =>

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

<template>
  <router-view :key="$route.path" />
</template>

Leave a comment