https://github.com/nivaldomartinez/link-prevue

Vue component for generate a link preview
https://github.com/nivaldomartinez/link-prevue

link-preview link-prevue preview vue vuejs

Last synced: about 2 months ago
JSON representation

Vue component for generate a link preview

• Host: GitHub
• URL: https://github.com/nivaldomartinez/link-prevue
• Owner: nivaldomartinez
• Created: 2017-12-30T18:36:15.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-14T18:54:06.000Z (5 months ago)
• Last Synced: 2024-06-22T05:04:06.102Z (3 months ago)
• Topics: link-preview, link-prevue, preview, vue, vuejs
• Language: Vue
• Size: 461 KB
• Stars: 236
• Watchers: 3
• Forks: 29
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



## link-prevue

> A flexible component for generating a link preview



  



## Intallation

```

npm install link-prevue

```

## Basic usage

> Javascript

```javascript

import LinkPrevue from 'link-prevue'

```

> HTML

```html



  



```


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

```html



  

    

      


        

        


          
{{props.title}}

          
{{props.description}}

          More

        

      

    

  



```


## Custom loading indicator

To use a custom loading indicator, use the loading slot.

```html



  

    

      

      
Loading...

    

  



```


## Custom button handler

For custom button handler use the onButtonClick property, like.

> HTML

```html



  



```

> Javascript

```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](https://github.com/nivaldomartinez/link-prevue-api-node)

## API REST

link-prevue uses an API REST for retrieve link data if you want to use your own API REST check [this](https://github.com/nivaldomartinez/link-prevue-api-node).

## License

This code is distributed under the terms and conditions of the [MIT license](https://opensource.org/licenses/MIT).

## compatibility

| version | vue |

|-|-|

| v2.x | v3.x |

| v1.x | v2.x |