# Vue

It's available as [](https://www.npmjs.com/package/@microlink/vue)

npm package

.

    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:

    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](https://microlink.io/docs/sdk/integrations/vue#globally)

###### [App.js](https://microlink.io/docs/sdk/integrations/vue#appjs)

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

    Vue.use(Microlink)

###### [MyComponent.vue](https://microlink.io/docs/sdk/integrations/vue#mycomponentvue)

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

#### [On-demand](https://microlink.io/docs/sdk/integrations/vue#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](https://microlink.io/docs/api/getting-started/overview) query parameter, just pass them as props.

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

[](https://www.youtube.com/watch?v=9P6rdqiybaw)

Although it's shipped with default styles, you can customize it using [](https://microlink.io/docs/sdk/getting-started/styling#css-variables)

CSS variables

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

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

[](https://www.youtube.com/watch?v=9P6rdqiybaw)