_main.js_

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

```js
import { createApp } 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);
});

const app = createApp(App);
app.config.isCustomElement = tag => tag.startsWith('amplify-');
app.mount('#app');
```

<Callout>

If you are using a build step to compile templates, you must configure `isCustomElement` option from the compiler configuration. You can use <amplify-external-link href="https://gist.github.com/wlee221/3d47f9598d5ad85bfa7a138bad112c3c"><code>vue.config.js</code></amplify-external-link> gist or <amplify-external-link href="https://gist.github.com/wlee221/3d47f9598d5ad85bfa7a138bad112c3c"><code>vite.config.js</code></amplify-external-link> gist to configure it for example. 

</Callout>

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

```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");
```

</Block>
</BlockSwitcher>