link-prevue
v2.0.1
Published
Vue component for generate a link preview
Downloads
2,108
Maintainers
Readme
link-prevue
A flexible component for generating a link preview
Intallation
npm install link-prevue
Basic usage
Javascript
import LinkPrevue from 'link-prevue'
HTML
<div id="app">
<LinkPrevue url="https://vuejs.org/"></LinkPrevue>
</div>
:+1:
Custom card
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 slot-scope="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>
Custom loading indicator
To use a custom loading indicator, use the loading slot.
<div id="app">
<LinkPrevue url="https://vuejs.org/">
<template slot="loading">
<!-- set your custom loading -->
<h1>Loading...</h1>
</template>
</LinkPrevue>
</div>
Custom button handler
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)
}
}
}
Props API
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
API REST
link-prevue uses an API REST for retrieve link data if you want to use your own API REST check this.
License
This code is distributed under the terms and conditions of the MIT license.
Donate
Address: 0xd0177a8D356A757Cb65E64222bD41132fC6ee571