Using Vue.JS Community Component in My Own Application

Read Time:2 Minute, 45 Second

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.

About Post Author

Lucas Jellema

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.

lucas.jellema@amis.nl

https://www.amis.nl/