overlay.js

First lets add an component that will overlay the screen when called though the even bus. This new component will be a div we position absolutely on the screen through some css I added to the index.html

Pro-tip: Don’t just add styles to your html, create separate css files for them and don’t be lazy like I am doing here.

All the Styles for our overlay Component

With Vue.js if you are using the single file components you can have styles scoped to components. We haven’t set up a build for this little project yet so we may do that in the future and remove the style “hack” from our index.html at that time.

Now that for the component it’s self. It will basically be a div that we hide and show depending on if it has been told to show or not from the event hub.

Our Overlay is Showing

Conclusion

Now that we have an overlay component we can easily add it to other actions if we wanted. Is there anything else you feel we should look at? Let me know by leaving a comment below or emailing brett@wipdeveloper.com.