Site icon Experiences Unlimited

Creating Simple Component in Vuejs


In this article, we will look at creating a very simple component in Vuejs. Let me pick the example from my previous post and create a component for showing the loading message.

Vuejs Component

There are two ways to create Vuejs component

In our example here we will use the latter part because our component is simple and doesn’t warrant a lot of ceremonies.

Vuejs Component Definition

For our loading message component, the only value that needs to be passed is the message to be rendered and that will be accepted as an attribute of the component. Let us go ahead and define and register the component using the below code:

Vue.component('loading', {
    template: '<div class="alert alert-info">\
        <i class="fa fa-spinner fa-spin"></i> {{message}} \
    props: ["message"]

In the above code:

Using the component

In the places where a loading message needs to be shown, add the following HTML:

<loading v-if="loadingDetail" :message="'Loading Detail...'"></loading>

Isn’t it very simple!!


You can find the complete code here. In my next post, I will show you how to create a Bootstrap pagination component. This will involve component state, event handling as well.

Exit mobile version