Oct 6, 2024
0
Level 4
Laravel blade file data do not pass Vue 3
working with Laravel 10 and vue js 3 with vuex 4 in state management. I have following welcome.blade.php
<script>
(function () {
window.Laravel = {
csrfToken: '{{ csrf_token() }}',
user: @json(Auth::user())
};
console.log('Laravel User:', window.Laravel.user);
})();
</script>
</head>
<body>
<div id="app">
@if(Auth::check())
<mainapp :user="{{Auth::user()}}"></mainapp>
@else
<mainapp :user="false"></mainapp>
@endif
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
and mainapp.vue file
<template>
<div>
<div v-if="$store.state.user">
<!--========== ADMIN SIDE MENU one ========-->
<div class="_1side_menu">
<div class="_1side_menu_logo">
<h3 style="text-align:center;">Logo Image</h3>
<!--<img src="/img/logo.jpg" style="width: 108px;margin-left: 68px;"/>-->
</div>
<!--~~~~~~~~ MENU CONTENT ~~~~~~~~-->
<div class="_1side_menu_content">
<div class="_1side_menu_img_name">
<p class="_1side_menu_name">Admin</p>
</div>
<!--~~~ MENU LIST ~~~~~~-->
<div class="_1side_menu_list">
<ul class="_1side_menu_list_ul">
<li><router-link to="/"><Icon type="ios-speedometer" /> Dashboard</router-link></li>
<li><router-link to="tags"><Icon type="ios-speedometer" /> Tags</router-link></li>
<li><router-link to="category"><Icon type="ios-speedometer" /> Category</router-link></li>
<li><router-link to="adminusers"><Icon type="ios-speedometer" /> Admin users</router-link></li>
<li><a href="/logout"><Icon type="ios-speedometer" /> Logout</a></li>
</ul>
</div>
</div>
</div>
<!--========== ADMIN SIDE MENU ========-->
<!--========= HEADER ==========-->
<div class="header">
<div class="_2menu _box_shadow">
<div class="_2menu_logo">
<ul class="open_button">
<li>
<Icon type="ios-list" />
</li>
</ul>
</div>
</div>
</div>
<!--========= HEADER ==========-->
</div>
<router-view />
</div>
</template>
<script>
export default {
props: ['user'],
data(){
return {
isLoggedIn : false,
}
},
created(){
console.log(this.user)
console.log('mainapp user',this.user);
this.$store.commit('updateUser', this.user)
}
}
</script>
and store.js
0
working with Laravel 10 and vue js 3 with vuex 4 in state management. I have following welcome.blade.php
<script>
(function () {
window.Laravel = {
csrfToken: '{{ csrf_token() }}',
user: @json(Auth::user())
};
console.log('Laravel User:', window.Laravel.user);
})();
</script>
</head>
<body>
<div id="app">
@if(Auth::check())
<mainapp :user="{{Auth::user()}}"></mainapp>
@else
<mainapp :user="false"></mainapp>
@endif
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
and mainapp.vue file
<template>
<div>
<div v-if="$store.state.user">
<!--========== ADMIN SIDE MENU one ========-->
<div class="_1side_menu">
<div class="_1side_menu_logo">
<h3 style="text-align:center;">Logo Image</h3>
<!--<img src="/img/logo.jpg" style="width: 108px;margin-left: 68px;"/>-->
</div>
<!--~~~~~~~~ MENU CONTENT ~~~~~~~~-->
<div class="_1side_menu_content">
<div class="_1side_menu_img_name">
<p class="_1side_menu_name">Admin</p>
</div>
<!--~~~ MENU LIST ~~~~~~-->
<div class="_1side_menu_list">
<ul class="_1side_menu_list_ul">
<li><router-link to="/"><Icon type="ios-speedometer" /> Dashboard</router-link></li>
<li><router-link to="tags"><Icon type="ios-speedometer" /> Tags</router-link></li>
<li><router-link to="category"><Icon type="ios-speedometer" /> Category</router-link></li>
<li><router-link to="adminusers"><Icon type="ios-speedometer" /> Admin users</router-link></li>
<li><a href="/logout"><Icon type="ios-speedometer" /> Logout</a></li>
</ul>
</div>
</div>
</div>
<!--========== ADMIN SIDE MENU ========-->
<!--========= HEADER ==========-->
<div class="header">
<div class="_2menu _box_shadow">
<div class="_2menu_logo">
<ul class="open_button">
<li>
<Icon type="ios-list" />
</li>
</ul>
</div>
</div>
</div>
<!--========= HEADER ==========-->
</div>
<router-view />
</div>
</template>
<script>
export default {
props: ['user'],
data(){
return {
isLoggedIn : false,
}
},
created(){
console.log(this.user)
console.log('mainapp user',this.user);
this.$store.commit('updateUser', this.user)
}
}
</script>
and store.js
import { createStore } from 'vuex';
const store = createStore({
state : {
conuter : 1000,
deleteModalObj : {
showDeleteModal: false,
deleteUrl : '',
data : null,
deletingIndex: -1,
isDeleted : false,
},
user: false,
},
getters: {
getCounter(state){
return state.conuter
},
getDeleteModalObj(state){
return state.deleteModalObj;
},
},
mutations: {
changeTheCounter(state, data){
state.conuter += data
},
setDeleteModal(state, data){
const deleteModalObj = {
showDeleteModal: false,
deleteUrl : '',
data : null,
deletingIndex: -1,
isDeleted : data,
}
state.deleteModalObj = deleteModalObj
},
setDeletingModalObj(state, data){
console.log('setDeletingModalObj mutation called');
console.log('Data received:', JSON.parse(JSON.stringify(data))); // Convert Proxy to plain object for logging
state.deleteModalObj = data
console.log('Updated deleteModalObj state:', JSON.parse(JSON.stringify(state.deleteModalObj)));
},
// updateUser(state, data) {
// console.log('updateUser mutation called with data:', data); // Debugging line
// // state.user = data || false;
// state.user = data;
// console.log('state.user after update:', state.user); // Debugging line
// },
updateUser(state, data){
state.user = data
},
},
actions :{
changeCounterAction({commit}, data){
commit('changeTheCounter', data)
}
}
});
export default store;
my logged user data print on Laravel blade file but not passed it to vue file and as the result of that not showing menus as well. what is the problem with not passing data with vue file
Please or to participate in this conversation.