How to render Vue component in hidden HTML element - laravel

Question

In my app, I have the right slide bar that contains Vue components that represent system notifications. By default, the right bar is hidden (out of the screen) and when the user opens it the bar is blank(meaning no components displayed). In DevTools, I can see that Vue components weren't rendered
However, if I put the same code from right.blade.php to any normal view then every notification will be displayed.
My assumption so far, the Vue cannot render components in hidden HTML. Am I correct?
Here is the screenshot that demonstrates the presents of PHP code and the absence of Vue component, and the code itself:
right bar screenshot
rightbar.blade.php
<div id="rightbar" class="rightbar">
<div class="mt-2">
<ul class="nav nav-tabs2">
<li class="nav-item"><a class="nav-link active show" data-toggle="tab" href="#notifications">Notifications</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#channels">Channels</a></li>
</ul>
<hr>
<div class="tab-content">
<div class="tab-pane show active" id="notifications">
#foreach(auth()->user()->unreadNotifications as $key => $notification)
<p>here</p> //<---------------------------this works
<notification props_id="{{$notification->id}}"
props_route="{{route('item.show',$notification['data']['item']).'#documents'}}"
props_title="New item uploaded"
props_body="User {{$notification['data']['name']}} uploaded {{$notification['data']['item']}}"
props_date="{{$notification->created_at}}">
</notification> //<------------------------- this doesn't works
#endforeach
</div>
<div class="tab-pane" id="channels">
<p>channel 1</p>
<p>channel 2</p>
<p>channel 3</p>
</div>
</div>
</div>
</div>
Notification.vue
<template>
<transition name="slide-fade">
<div class="card" v-show="showNotification" >
<div class="header">
<h2 v-text="title"></h2>
<ul class="header-dropdown dropdown">
<li><i class="fa fa-close"></i></li>
</ul>
</div>
<div style="cursor:pointer" #click="openSubject()">
<div class="card-body">
<p class="card-text" v-text="body"></p>
</div>
<div class="card-footer">
<small class="text-muted" v-text="date"></small>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
props_id: String,
props_route: String,
props_title: String,
props_body: String,
props_date: String,
},
name: "Notification",
data(){
return{
id: this.props_id,
route: this.props_route,
title: this.props_title,
body: this.props_body,
date: this.props_body,
showNotification: true,
}
},
methods:{
openSubject(){
location.href = this.route;
this.markAsRead()
},
markAsRead(){
axios
.put("/notifications/"+this.id)
.then(response => {
this.deleteNotification()
})
.catch(error => console.log(error))
},
deleteNotification(){
this.showNotification = false;
},
},
mounted() {
console.log('Vue notification')
}
}
</script>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(1000px);
opacity: 0;
}
</style>
app.js
Vue.component('notification', require('./components/Notification.vue').default);
rightbar.scss
.rightbar{
#include box-shadow(0 5px 10px 0px rgba($dark,.3));
#include transition(all .3s ease-in-out);
background: $body-color;
position: fixed;
top: 0;
right: -500px;
width: 500px;
height: 100vh;
overflow-y: scroll;
z-index: 13;
padding: 8px 20px;
&.open{
right: 0;
}
#include max-screen($break-medium) {
width: 450px;
}
#include max-screen($break-small - 1px) {
width: 340px;
}
.chat_detail{
display: block;
position: relative;
.chat-widget{
height: calc(100vh - 200px);
overflow-y: auto;
}
.input-group{
position: fixed;
bottom: 10px;
width: 460px;
#include max-screen($break-medium) {
width: 410px;
}
#include max-screen($break-small - 1px) {
width: 300px;
}
}
}
}

Answer 1

Your DevTools screenshot shows <notification> instead of the component's rendered elements, indicating that the component is not actually registered.
I would check the component registration in your view.