## Table of Contents

- [Vue](#vue)
    - [Globally](#globally)
        - [App.js](#appjs)
        - [MyComponent.vue](#mycomponentvue)
    - [On-demand](#on-demand)

---

[](https://microlink.io/docs/api/getting-started/overview)

[API](https://microlink.io/docs/api/getting-started/overview)

[](https://microlink.io/docs/guides)

GUIDES

[](https://microlink.io/docs/mql/getting-started/overview)

MQL

[](https://microlink.io/docs/sdk/getting-started/overview)

SDK

[](https://microlink.io/docs/cards/getting-started/overview)

CARDS

## Vue

``` bash
npm install @microlink/vue --save
```

The Vue bundle is based on the [Vanilla](https://microlink.io/docs/sdk/integrations/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:

``` bash
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

``` js
import Vue from 'vue'

import Microlink from '@microlink/vue'

Vue.use(Microlink)
```

###### MyComponent.vue

``` bash
<template>

  <Microlink url='https://microlink.io' />

</template>
```

#### On-demand

``` bash
<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.

``` js
import Vue from 'vue'

import Microlink from '@microlink/vue'

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

The Vue integration supports any [Microlink API](https://microlink.io/docs/api/getting-started/overview) query parameter, just pass them as props.

``` bash
<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 [](https://microlink.io/docs/sdk/getting-started/styling#css-variables)

[CSS variables](https://microlink.io/docs/sdk/getting-started/styling#css-variables)

or [CSS classes](https://microlink.io/docs/sdk/getting-started/styling#css-classes).

``` bash
<template>

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

</template>

<style>

#app /deep/ .microlink_card {

  font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';

  max-width: 100%;

}

</style>
```