Vue

|

The legacy Microlink Embed SDK is no longer maintained. It keeps working and you can still use it, but it won't receive further updates. The new Microlink SDK — the microlink.io package — is the way to consume the Microlink API going forward.

It's available as npm package.

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>