Vue 3.x - export 'config' was not found in 'vue'

[ghost]

Describe the bug
When trying to import the Vue UI components with import '@aws-amplify/ui-vue' in a fresh Vue 3.x app, the console throws the error message export 'config' was not found in 'vue'

To Reproduce
Steps to reproduce the behavior:

1. Create new Vue 3.x app with vue create myamplifyproject
2. Add Amplify packages npm install aws-amplify @aws-amplify/ui-vue
3. Import components in src/main.js

import Amplify from 'aws-amplify';
import '@aws-amplify/ui-vue';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

4. Start app with npm run serve

Expected behavior
App to start without any errors

Additional context
I guess it has to do with how Vue 3.x exports it different methods

[jordanranz]

Since Vue 3.x is currently in beta we do not officially support it in Amplify. I'll mark this as a feature request to investigate this so we can prepare for the Vue 3.x official launch.

[chrisleyva]

Hi @jordanranz , I am sure you are aware but Vue 3 was officially released last week.
Are you aware of any work-arounds to get this import to work in a Vue 3 project?

Thank you. We appreciate your work.

[csbszb]

If you're looking for a way to use the @aws-amplify/ui-components, this is how I got it work in a new Vue 3 project.
I uninstalled the @aws-amplify/ui-vue library and then just added these lines to main.(ts|js) file:

import { createApp } from 'vue';
import { applyPolyfills, defineCustomElements } from '@aws-amplify/ui-components/loader';

...

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

... 

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

Ref: config.ignoredElements Is Now config.isCustomElement

[amhinson]

@chrisleyva For context, it looks like StencilJS, which we use for our UI components, is still working on Vue 3 support.

ionic-team/stencil-ds-output-targets#94

We will track this and update our library once the Stencil PR is released.

[krcummings1]

Since Vue 3.x is currently in beta we do not officially support it in Amplify. I'll mark this as a feature request to investigate this so we can prepare for the Vue 3.x official launch.

@jordanranz Does amplify support Vue 3 yet? I'm getting this error and am unsure if I did something wrong or if it's still unsupported.

warning  in ./node_modules/@aws-amplify/ui-vue/dist/index.js
"export 'default' (imported as 'Vue') was not found in 'vue'

[amhinson]

@krcummings1 As mentioned in the comment above, Amplify does not have Vue 3 support yet due to our usage of StencilJS for the UI Components. Once the pending PR is merged, we will work to upgrade our libraries soon after.

[IamManchanda]

Thanks @csbszb, your solution works for me ... atleast setting it up

Looking at this and this I feel that your solution should be correct ... will let you guys know if I am still stucked :)

[wlee221]

If you're looking for a way to use the @aws-amplify/ui-components, this is how I got it work in a new Vue 3 project.

Thanks for this @csbszb! This is the intended workaround while we work on vue3 support. Note that if you used @vue/cli to bootstrap the project, you would need to add isCustomElement arguments to vue.config.js as such and add vue-loader@next to dependencies.

[wlee221]

As per official vue3 support, we are working on a plan that would support both Vue 1/2 and Vue 3.

As you all have noted, Vue 3 deprecated global configuration Vue.config and scoped it down to an instance level. In doing so, Vue has deprecated default export so that's why you will see the export 'config' was not found in 'vue' error. Here's what the difference looks like:

// Vue 2
import Vue from 'vue'; // I'm a default export!

Vue.config.ignoredElements = [/^amplify-/];

// Vue 3
import { createApp } from 'vue'; // now I'm a named export?!

const app = createApp({});
app.config.isCustomElement = tag => tag.startsWith('amplify-');

The problem is that we cannot satisfy both versions because their configurations are almost mutually exclusive. Moreover, this approach doesn't work with Vue 3 if customer used @vue/cli as mentioned above.

So we are looking to use stencil output binding (based on the PR @amhinson mentioned) to generate vue components. But this would only support vue 3 again, so we are trying to devise a plan that would satisfy all vue versions and minimize configuration complexity on the user end.

We will keep this issue open to track vue 3 support. Please feel to contribute or give suggestion as we work through this. Thanks!

[sammartinez]

Hello! I wanted to provide an update here, we are currently planning work for support of Vue 3 into the UI Components. While we can't provide a timeline on when this will be released, this work has begun this sprint.

[modullar]

@csbszb
Although the chunk of code made the app works, I am still getting this error in the browser console:

Uncaught TypeError: Cannot set property 'isCustomElement' of undefined
I have the app assigned this way: const app = createApp(App).mount('#app')

I wonder if the last line is important at all

[csbszb]

Hey @modullar,

I think the problem is that with this line const app = createApp(App).mount('#app')
The app variable won't be an App type but whatever the mount function returns (ComponentPublicInstance)

If you split them like this it works fine:

const app = createApp(App);

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

[wlee221]

Closing as our docs have been updated for Vue 3: aws-amplify/docs#2880.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.