How can I add condition to call vue component if local storage javascript exist in view blade laravel?

Question

My view blade laravel like this :

<ul class="nav">
    <li>
        ...
    </li>
    // if exist local storage run this component
    <notification-view></notification-view>
</ul>

I want to add condition if local storage exist, it will run the component vue

I have main.js and I have code to check local storage exist or no like this :

if (localStorage.getItem("storedData") !== null) {
   ...
}

How can I add the condition on the view blade?

Update

My notification vie component like this :

<template>
    <li> 
        ...
    </li>
</template>
<script>
    export default{
        ...
    }
</script>

Answer 1

First of all, this question has nothing to do with Laravel. It is just Vue.

You can bind the local storage data to view the property and directly use v-if directive to decide whether to show the component or not.

Simply use localStorage.setItem() to set a property, and then user localStorage.getItem() to fetch the property and bind it.

Check here for a fiddle.

You can simply use the v-if directive on the

<notification-view v-if="someProperty"></notification-view>

to display or hide the component.