## Installation

<BlockSwitcher>
<Block name="Vue 3">

```
yarn add aws-amplify @aws-amplify/ui-vue
```

</Block>
<Block name="Vue 2">

```
yarn add aws-amplify @aws-amplify/ui-components
```

*main.js*

```js
import Vue from 'vue';
import App from './App.vue';
import {
  applyPolyfills,
  defineCustomElements,
} from '@aws-amplify/ui-components/loader';

import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

applyPolyfills().then(() => {
  defineCustomElements(window);
});

Vue.config.ignoredElements = [/amplify-\w*/];

new Vue({
  render: (h) => h(App),
}).$mount('#app');
```

*App.vue*

```html
<template>
  <amplify-authenticator>
    <div>
      My App
      <amplify-sign-out></amplify-sign-out>
    </div>
  </amplify-authenticator>
</template>
```

For the full documentation on the Vue 2 UI components click [here](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue).


</Block>
</BlockSwitcher>