Get Laravel session with Vue

You can't make that work because Laravel uses a PHP session and VueJS uses a different state manager like vuex or local storage. Also sessions are most of the time encrypted so you can't read it anyway.

So normally you would handle your full login process by either vue or laravel. In this case you try to combine the two which sounds wrong to me.

So you should use blade to show the flash message for example and then based on the session do stuff. You can still use vue components then but the state is manage by Laravel.

When you redirect form your controller to some path you can't let that be handled by vue, because it doesn't know anything about that session!

@bobbybouwmann okay, thank you. I'm new to Vue so I don't really know how it goes.

So your backend and frontend should manage their own state. If you want to pass some state from Laravel to Vue you either need to get it using an API call or pass it to the component from your blade file.

What exactly are you trying to achieve here? Can you show some code as well? Maybe we can help you out ;)

I have Main Layout for an application which is called HomeComponent.vue

<template>
  <v-app id="inspire" dark>

    <v-navigation-drawer
      v-model="drawer"
      clipped
      fixed
      app
    >
      <v-list dense>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>mdi-login</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <router-link to="/login">
                <v-list-tile-title>Login</v-list-tile-title>
            </router-link>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>mdi-account-plus</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
              <router-link to="/register">
                <v-list-tile-title>Register</v-list-tile-title>
              </router-link>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>

    <v-toolbar app fixed clipped-left>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Logo</v-toolbar-title>
    </v-toolbar>

    <v-container fill-height>
        <v-layout justify-center align-center>
            <router-view></router-view>
        </v-layout>
    </v-container>

    <v-footer app fixed class="justify-content-center">
      <span>Logo © 2018.</span>
    </v-footer>

  </v-app>
</template>

<script>
  export default {
    mounted() {
        console.log('Component mounted.')
    },
    data: () => ({
      drawer: true
    }),
    props: {
      source: String
    }
  }
</script>

In that layout I use router to change between Login and Register components. This is the LoginComponent.vue

<template>
    <v-content>
        <v-container fluid fill-height>
            <v-layout align-center justify-center>
                <v-flex xs12 sm8 md6>
                    <v-alert
                    v-model="successAlert"
                    type="success"
                    >
                    This is a success alert.
                    </v-alert>
                    <v-card class="elevation-12">
                        <v-toolbar dark color="primary">
                            <v-toolbar-title>Login</v-toolbar-title>
                        </v-toolbar>
                        <v-card-text>
                            <v-form>
                                <v-text-field
                                prepend-icon="person"
                                v-model="username"
                                :rules="usernameRules"
                                label="Username"
                                type="text"></v-text-field>

                                <v-text-field
                                prepend-icon="lock"
                                v-model="password"
                                :rules="passwordRules"
                                label="Password"
                                type="password"></v-text-field>
                            </v-form>
                        </v-card-text>
                        <v-card-actions>

                                <router-link to="/forgot-password">
                                    <a style="color: white;">Forgot your password?</a>
                                </router-link>

                            <v-spacer></v-spacer>
                            <v-btn color="primary">Login</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-flex>
            </v-layout>
      </v-container>
    </v-content>
</template>

<script>
  export default {
    mounted: function () {
        this.$session.start();
        if (this.$session.exists('verified')){
            console.log('Yes it exists');
            this.$session.destroy();
            this.showSuccessAlert();
        }
    },
    data: () => ({
      drawer: null,
      successAlert: 0,
      username: '',
      usernameRules: [
          v => !!v || 'Username is required'
      ],
      password: '',
      passwordRules: [
          v => !!v || 'Password is required'
      ]
    }),
    props: {
      source: String,
    },
    methods: {
        showSuccessAlert() {
            this.successAlert = 1;
        }
    }
  }
</script>

In this Login Component I have alert which should be shown when there is 'verified' session which comes from UserController

This is the function from UserController

public function activateAccount($email, $token) {
        $user = User::where('email', $email)->firstOrFail();

        if($user->confirmation_token === $token) {
            $user->mail_confirmed = 1;
            $user->save();
            return redirect('/login')->with('verified', 'Account successfully verified. You can log in now.');
        }
    }

And I have route in web.php for all of that.

Route::get('/activate/{email}/{token}', 'UserController@activateAccount');

I'm using Vuetify, material component framework.

Alright. So right now you use a normal post action to the backend of your application. This means that you will leave your frontend component and you won't be able to manage the state. If you want to build a Single Page Application (SPA), which I think you're building right now, you don't want your server to redirect the user to pages. You want to handle that with the VueRouter instead. So when you login you can give a success response with some message, but your component should be sending an ajax call to the server and handle the response. So instead of letting your server redirect you catch the response in your component and based on that you route to another page with Vue.

Does that make any sense?