Search code examples
laravelvuejs2vue-routerinertiajslaravel-jetstream

Component not showing only on login


I have setup a Laravel(8.83.23) with Jetstream(2.7.5) and Inertia laravel(0.3.6)

Im using Vuejs(2.7.3) with vue-router(3.6.4) and it seem inertia-vue(0.5.12)

Everything work fine except for the component that should be shown after a successful login which is my dashboard. I have setup vue-router to use /app/ as a base .

When I log in, the redirection to /app/dashboard work fine but my Dashboard.vue Page is not shown. If i access directly the url it work, any router-link to it work too. Accessing /login AFTER being logged work as it redirect correctly and the page is shown. The only time the page is not shown is when I'm authenticating. Any other component are shown (like a nav that show only when logged in)

After investigating $route.path, it seem to stuck for an unknown reason to /login.
This happen only when I do a successful login attempts.

I don't know where to look next to try to fix this. I'm suspecting something within the <router-view></router-view> as other component outside of it works well but how can I address this very specific situation?

EDIT: Here is the code of the App.vue

<template>
  <app-layout>
    <v-row>
      <v-col class="pa-0 mb-3">
        <v-toolbar elevation="1" dense>
          <v-toolbar-title>App</v-toolbar-title>
          <template v-slot:extension>
            <v-tabs show-arrows :hide-slider="!inAppLinks">
              <v-tab v-for="link in appLinks" :to="link"
                >Go to {{ link }}</v-tab
              >
            </v-tabs>
          </template>
        </v-toolbar>
      </v-col>
    </v-row>

    <router-view></router-view>
  </app-layout>
</template>

And the code of route.js:

paths : [
  { path:'/dashboard', component:Dashboard },
  { path:'/foo', component: Sample },
  { path:'/bar', component: Sample },
  { path:'/faz', component: Sample },
  { path:'/baz', component: Sample },
  { path:'/login', redirect: '/dashboard' }
]

vue-router use a /app/ as base url. As I don't have /app/login, making a redirect from /app/login to /app/dashboard work, but this does not solve the problem

I've setup a demo at demo.concept-net.net
You can login with [email protected] and password demodemo The demo doesn't have the redirect


Solution

  • As I don't get an answer, and I didn't find a better solution, I'm gonna stick to the redirect for now as it kinda work.

    So what I did was a redirect from /login to /dashboard inside vue-router as the login is not managed there it seem to cause no issues­(all related things to vue-router use /app/ as a base URL and the login is manage by jetstream on root url).