menu

Questions & Answers

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

When I click in a router-link to go to register-form page, the URL changes, but the component doesn´t load. component register-form not displayed

I have the navbar in a component, and I thought that it was wrong, but no...

Here's the router's file code:

    import {createRouter, createWebHashHistory} from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
        path: '/formulario-registro',
        name: 'RegisterForm',
        component: () => import(/*webpackChunkName: "registerform"*/ '../views/RegisterForm.vue')
    }

]

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router

And here's my nav componet, where there are the router-link:

  <div class="nav">
<div class="brand">
  <router-link to="/">BookArt</router-link>
</div>
<div class="collapse">
  <span id="mobile-icon" v-on:click="responsiveNavbar"></span>
</div>
<div class="links">
  <ul id="nav-list-group">
    <li class="list-item">
      <router-link to="/"> Inicio</router-link>
    </li>
    <li class="list-item">
      <router-link to="/formulario-registro"> Registro</router-link>
    </li>
    <li class="list-item">
      <router-link to=""> Login</router-link>
    </li>
  </ul>
</div>

My main.js code:

    import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

And my App.vue code:

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

<script>

import Nav from '@/components/Nav.vue'

export default {
  components: {
    Nav
  }
}
</script>

Here's my register-form component's code:

   <template>
  <form action="">
    <div class="form-group">
      <input type="text" name="form.username" id="form.username" class="username" placeholder="Nombre de usuario....">
    </div>
    <div class="form-group">
      <input type="file" name="form.profile_pic" id="form.profile_pic" class="profile_pic"
             placeholder="Foto de perfil....">
    </div>
    <div class="form-group">
      <input type="email" name="form.email" id="form.email" class="email" placeholder="Email....">
    </div>
    <div class="form-group">
      <input type="password" name="form.password" id="form.password" class="password" placeholder="*******">
    </div>
    <div class="form-group">
      <input type="password" name="form.confirm_password" id="form.confirm.password" class="confirm_password"
             placeholder="*******">
    </div>
    <div class="form-group">
      <button>Registrarse</button>
    </div>
  </form>

</template>

<script>
export default {
  name: "Register-form",

  mounted() {
    console.log('Its ok');
  }

}
</script>
Comments:
2023-01-20 23:20:09
please share the main.js and app.vue code
2023-01-20 23:20:09
@BoussadjraBrahim I have added them.
2023-01-20 23:20:09
the code seems work, did you get errors in console?
2023-01-20 23:20:09
I get the a warning runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at and the following error Uncaught (in promise) RangeError: Maximum call stack size exceeded at renderComponentRoot
2023-01-20 23:20:09
It seems that there's an issue in RegisterForm component please share its code :)
2023-01-20 23:20:09
All of this looks correct. So I'd love to see the RegisterForm code. "Stack size exceeded" indicates a possible infinite loop.
2023-01-20 23:20:09
I have added it. Sorry, I have forgotten to add
2023-01-20 23:20:09
it's weird, every thing looks fine
2023-01-20 23:20:09
@BoussadjraBrahim Is possible that vue version is generating the problem. I'm working on Vue 3, and it's the first time I get this error
2023-01-20 23:20:09
i see that you're working with vue 3, could you reproduce your code here codesandbox.io/s/…
2023-01-20 23:20:09
@BoussadjraBrahim Do you mean that put my code there?
2023-01-20 23:20:09
Yes, if it's not a big project
2023-01-20 23:20:09
@BoussadjraBrahim I'm not using TS. It's okey? I can create a jsfiddle or codepen
2023-01-20 23:20:09
Yes you could that fits to you
2023-01-20 23:20:09
You're using form.name etc. for different attributes but you haven't used v-bind for any of them: :id="form.name", could this be why? As @Kielstra said, it looks like an infinite loop but worth checking
2023-01-20 23:20:09
@Daniel_Knights I don't think it... I haven't any data, so the name shouldnt affect
2023-01-20 23:20:09
@BoussadjraBrahim Is okey if I give u the github link? I think I cannot put the code in the sandbox...
2023-01-20 23:20:09
@BoussadjraBrahim Here's the link github.com/FloatingHero105/BookArt
2023-01-20 23:20:09
@ÁlvaroPérezDíaz please check my answer below
Answers(2) :

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>
Comments:
2023-01-20 23:20:09
been following this from the start. I realized something. Missing info can lead to waste of time. A simple solution however it took 1 hour. Good job tho :)
2023-01-20 23:20:09
@omerS, thanks, generally these simple issues take a lot of time
2023-01-20 23:20:09
@BoussadjraBrahim This is awesome!! I would never have seen that error. Good job and thank you so much!! If this project can keep going it's for your help!!

change in App.vue =>

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

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