Q:

Gridsome + AWS Amplify - Importing Event Bus breaks Logout Button Component

I have successfully integrated AWS Amplify's Auth UI functionality and components with Gridsome for simple login/logout functionality but when I try to access the the Amplify Event Bus with
import { AmplifyEventBus } from "aws-amplify-vue" 
I get the error: 
Error in mounted hook (Promise/async): "TypeError: Cannot read property 'Logger' of undefined"
I have found a similar issue on the github post and adding the suggested
Vue.prototype.$Amplify = Amplify;

does remove the warning but the Auth UI Logout component will no longer show up. I can Login but the Logout button does not show up. I do not understand why accessing the event bus would necessitate me adding Amplify to the Vue prototype when the UI components are already working without it AND why even if I do add it the components still do not appear.

A:

The AmplifyEventBus has been discontinued, so is now considered Legacy
Instead, use Hub.listen, like this:
<script>
import { Hub } from 'aws-amplify'

export default {
  mounted() {
    Hub.listen('auth', (info) => {
      console.log('auth event:', info)
    })
  },
}
</script>

Logger can also be imported in the same way, like:
import { Hub, Logger } from 'aws-amplify'

