A flexible component for generating a link preview
npm install link-prevue
Javascript
import LinkPrevue from 'link-prevue'HTML
<div id="app">
<LinkPrevue url="https://vuejs.org/"></LinkPrevue>
</div>👍
To use a custom card, set your own html code between the aperture tag and the close tag of component. Using the scoped slot.
<div id="app">
<LinkPrevue url="https://vuejs.org/">
<template v-slot="props">
<div class="card" style="width: 20rem;">
<img class="card-img-top" :src="props.img" :alt="props.title" />
<div class="card-block">
<h4 class="card-title">{{props.title}}</h4>
<p class="card-text">{{props.description}}</p>
<a v-bind:href="props.url" class="btn btn-primary">More</a>
</div>
</div>
</template>
</LinkPrevue>
</div>To use a custom loading indicator, use the loading slot.
<div id="app">
<LinkPrevue url="https://vuejs.org/">
<template v-slot:loading>
<!-- set your custom loading -->
<h1>Loading...</h1>
</template>
</LinkPrevue>
</div>For custom button handler use the onButtonClick property, like.
HTML
<div id="app">
<LinkPrevue url="https://vuejs.org/" :onButtonClick="onClick"></LinkPrevue>
</div>Javascript
import LinkPrevue from 'link-prevue'
export default {
components:{
LinkPrevue
},
methods: {
onClick(prevue) {
console.log('click', prevue.images, prevue.title, prevue.url, prevue.description)
}
}
}link-prevue have the following props for customize the component
| Prop | Type | Required | Default Value | Description |
|---|---|---|---|---|
| url | String | yes | undefined | Site url for generate link preview |
| onButtonClick | Function | no | undefined | Function for a custom button handler, params => prevue |
| cardWidth | String | no | '400px' | Card width, accept px and % |
| showButton | Boolean | no | true | Render card button |
| apiUrl | String | no | https://link-preview-api.nivaldo.workers.dev/preview | Custom API url, link-preview add a query param called ?url= check this |
link-prevue uses an API REST for retrieve link data if you want to use your own API REST check this.
This code is distributed under the terms and conditions of the MIT license.
| version | vue |
|---|---|
| v2.x | v3.x |
| v1.x | v2.x |