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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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.
