Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

Vue.js Components Fundamentals

#2 Create a Notification Message Component

This lesson is also a component exercise lesson, where we're going to use everything we've learned about Vue.js components so far.

In this component exercise, we're going to build a fun and useful component that is a notification message.

In the exercise, we'll be using Semantic UI, we'll specifically use the message element. We've prepared a boilerplate as a starting point for the exercise.

Your goal is to create a component that will be passed some content (the message) and the type of notification (info, error, success). The user should also be able to close the notification.

We encourage you to go back and rewatch videos if you're stuck, but if want to, you can peak at the solution.

Good luck and have fun!

Important Note

Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN.

<script src="https://unpkg.com/vue@2"></script>