Vue

It's available as


npm install @microlink/vue --save

The Vue bundle is based on the Vanilla version, but exported as a CommonJS Vue plugin/component.

Since it doesn't include the peer dependencies, you'll need to install those too:


npm install react react-dom styled-components --save

After that, you’re ready to import the Microlink SDK into your Vue project, either globally or on-demand.

Globally

App. Js


import Vue from 'vue'
import Microlink from '@microlink/vue'

Vue.use(Microlink)

Mycomponent. Vue


<template>
  <Microlink url="https://microlink.io" />
</template>

On-demand


<template>
  <Microlink url="https://microlink.io" />
</template>

<script>
import { Microlink } from '@microlink/vue'

export default {
  name: 'MyComponent',
  components: { Microlink }
}
</script>

Importing the SDK globally allows you to define global API options, this is handy for setting an API key for your whole application.


import Vue from 'vue'
import Microlink from '@microlink/vue'

Vue.use(Microlink, { apiKey: 'MyApiKey' })

The Vue integration supports any Microlink API query parameter, just pass them as props.


<template>
  <Microlink url="https://www.youtube.com/watch?v=9P6rdqiybaw" size="large" />
</template>

Although it's shipped with default styles, you can customize it using

CSS variables

or CSS classes.


<template>
  <div id="app">
    <Microlink url="https://www.youtube.com/watch?v=9P6rdqiybaw" />
  </div>
</template>

<style>
#app /deep/ .microlink_card {
  font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
  max-width: 100%;
}
</style>