Using Vue.JS Community Component in My Own Application image 48

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  and

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: 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:



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:

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:

  <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">
        <div class="media-body">
          <h4 class="media-heading"><a v-bind:href="article.url" target="_blank">{{article.title}}</a></h4>
          <h5><i>by {{}}</i></h5>

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.