Using Vue.JS Community Component in My Own Application

In a recent blog article, I fiddle around a little with Vue.JS – Auto suggest with HTML5 Data List in Vue.js 2 application. For me, it was a nice little exercise to get going with properties and events, the basics for creating a custom component. It was fun to do, easy to achieve some degree of success.

Typing into a simple input field lists a number of suggestions – using the HTML5 data list component.

At that moment, I was not yet aware of the wealth of reusable components available to Vue.js developers, for example at https://vuecomponents.com/  and http://www.vuescript.com/.

I decided to try my hand at reusing just one of those components, expecting that to give me a good impression of what it is in general to reuse components. I stumbled across a nice little carousel component: https://wlada.github.io/vue-carousel-3d/ and thought that it might be nice to display the news items for the selected news source in a carousel. How hard can that be?

(well, in many server side web development framework, integrating third party components actually can be quite hard. And I am not sure it is that simple in all client side frameworks either).

The steps with integrating the Carousel in my Vue.js application turned out to be:

1. Install the component into the application’s directory structure:

npm install -S vue-carousel-3d

This downloads a set of files into the node-modules directory child folder vue-carousel-3d.

2. Import the component into the application

In main.js add an import statement:

import Carousel3d from ‘vue-carousel-3d’;

To install the plugin – make it globally available throughout the application – add this line, also in main.js:

Vue.use(Carousel3d);

At this point, the carousel component is available and can be added in templates.

3. To use the carousel, follow the instructions in its documentation: https://wlada.github.io/vue-carousel-3d/guide/

In the Newslist component from the original sample application (based on this article) I have introduced the carousel and slide components that have become available through the import of the carousel component:

<template>
  <div class="newslist">
    <carousel-3d controlsVisible="true">
      <slide :index="index"  v-for="(article,index) in articles">
        <div class="media-left">
          <a v-bind:href="article.url" target="_blank">
            <img class="media-object" v-bind:src="article.urlToImage">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading"><a v-bind:href="article.url" target="_blank">{{article.title}}</a></h4>
          <h5><i>by {{article.author}}</i></h5>
          <p>{{article.description}}</p>
        </div>
      </slide>
    </carousel-3d>
  </div>
</template>

Note: comparing with the code as it was before, only two lines were meaningfully changed – the ones with the carousel-3d tag and the slide tag.

The result: news items displayed in a 3d carousel.