The overlay background

At this point, there is something missing--the overlay background. We can't include it inside the overlay component because it would be zoomed during the animation--this would be quite awkward. Instead, we will use the simple fade animation we have created already.

In the main template, add a new p element with the overlay-background class just before the zoom transition and the overlay component:

<transition name="fade">
  <p class="overlay-background" v-if="activeOverlay" />
</transition>

With the v-if directive, it will only be displayed when any overlay is displayed.