I'm currently immersed in a project that involves Laravel and Vue.
My Objective I aim to authenticate a User before displaying any Vue Component to show the username in the Navbar.
Challenge The issue I'm facing is that the Vue Navbar Component gets rendered before the user authentication process completes, resulting in the navbar not displaying the username due to the component not being updated.
Query How can I access the store, trigger a mutation (user authentication) before creating the new "Vue" with components? Or, how can I ensure reactivity so that the component updates as soon as authentication is successful?
I also attempted using "computed" to update the state and username after the store.state.user changes. However, this approach doesn't seem to work possibly because of my limited understanding of reactivity despite reading extensively on the topic.
Additional Information Below are some key background details:
- I utilize Laravel for setting up routes (both Frontend and Backend)
- The use of a layout.blade file and inclusion of Vue components in the designated Laravel view files
- Authentication through JWT (working effectively)
Here's a snippet from my layout.blade.php
<!doctype html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Gembox</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
<link rel="stylesheet" href="{{asset(mix('/css/app.css'))}}">
</head>
</head>
<body>
<div id="app">
<header>
<div>
@include('includes.header')
</div>
</header>
<div class=" main-container md-elevation-4 container">
@yield('content')
</div>
<footer class=" md-elevation-4 mb-1">
@include('includes.footer')
</footer>
<script src="{{asset ('js/app.js')}}">
</script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material"></script>
</div>
</body>Your assistance is greatly valued!
Warm regards, Jörg