_main.js_

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

```diff
import App from "./App.vue";
- import Vue from 'vue';
- import Amplify, * as AmplifyModules from 'aws-amplify'
- import { AmplifyPlugin } from 'aws-amplify-vue'
+ import { createApp } from 'vue';
+ import {
+   applyPolyfills,
+   defineCustomElements,
+ } from '@aws-amplify/ui-components/loader';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

- new Vue({
-   render: h => h(App),
- }).$mount('#app');
+ applyPolyfills().then(() => {
+   defineCustomElements(window);
+ });
+ const app = createApp(App);
+ app.config.isCustomElement = tag => tag.startsWith('amplify-');
+ app.mount('#app');
```

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

```diff
import Vue from 'vue';
import App from "./App.vue";
- import Amplify, * as AmplifyModules from 'aws-amplify'
- import { AmplifyPlugin } from 'aws-amplify-vue'
+ import '@aws-amplify/ui-vue';
+ import { Amplify } from 'aws-amplify';
+ import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

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

</Block>
</BlockSwitcher>