Vue-portal conditional whether the portal is enabled?

Question

I would like to inject some information on the navbar (parent component) using Vue Portal.

So in a component, I can do:

<portal to="navbar">
   <b-button>Some option</b-button>
</portal>

Thus, in the Navbar component I have:

<portal-target name="navbar"></portal-target>

But I would like to add a separator in this navbar if and only if the portal is enabled:

<b-nav-text v-if="$portal.navbar.enabled">|</b-nav-text> 
<portal-target name="navbar"></portal-target>

Obviously the $portal prototype is not available... What's the alternative?

Answer 1

This can be done by CSS easily.

.portal {
  position: relative;
  color: #000;
}
.portal:after {
  display: block;
  position: absolute;
  right: 0 // or left, depends on your design.
  content: "|" // or content: "" and the styles down below
  top: 0; // or any value
  bottom: 0;  // or any value
  width: 1px;  // or any value
  background: currentColor;
}