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 API Parameter, just pass them as props.
<template>
  <Microlink url="https://instagram.com/p/Bu1-PpyHmCn/" size="large" />
</template>
Although it's shipped with default styles, you can customize it using
<template>
  <div id="app">
    <Microlink url="https://instagram.com/p/Bu1-PpyHmCn/" />
  </div>
</template>

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

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 API Parameter, just pass them as props.
<template>
  <Microlink url="https://instagram.com/p/Bu1-PpyHmCn/" size="large" />
</template>
Although it's shipped with default styles, you can customize it using
<template>
  <div id="app">
    <Microlink url="https://instagram.com/p/Bu1-PpyHmCn/" />
  </div>
</template>

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