quasar: Unable to use AWS Amplify JS as Quasar App Plugin

Software version

Operating System        Darwin(16.7.0) - darwin/x64
NodeJs                          8.9.0

Global packages
  NPM                           5.6.0
  yarn                            1.7.0
  quasar-cli                  0.17.20
  vue-cli                       3.0.5

Any other software related to your bug: package.json in relation to amplify lib

    "aws-amplify": "^1.1.18",
    "aws-amplify-vue": "^0.2.5",

JsFiddle

What did you get as the error?

No error - Vue doesn’t see this.$Amplify initialized

What were you expecting?

Able to access this.$Amplify

What steps did you take, to get the error?

Installed Amplify library: npm i aws-amplify aws-amplify-vue
Created a new Quasar App plugin as it requires Vue.use: quasar new plugin amplify
Modified src/plugin/amplify.js to include what’s Amplify asks with the exception of new Vue according to Quasar docs:

// import something here
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import AwsExports from './aws-exports'
Amplify.configure(AwsExports)

// It's important that you instantiate the Vue instance after calling Vue.use!

// leave the export, even if you don't use it
export default ({ app, router, Vue }) => {
  // something to do
  Vue.use(AmplifyPlugin, AmplifyModules)
  new Vue(app)
}

Modified App.vue to import Amplify components as per installation guide:

<template>
  <div id="q-app">
    <router-view/>
  </div>
</template>

<script>
import { components } from "aws-amplify-vue"; // eslint-disable-line
export default {
  name: 'App',
  components: {
    ...components
  }
}
</script>

<style>
</style>

Tried to access Amplify JS utilities through **`this.$Amplifyin one of my Quasar pages as well as through$vm0`` and can’t see it being defined

This process works on Vanilla Vue (no Quasar, no Nuxt) - However I’m new to Quasar so I’m almost sure I’m doing something wrong — Any help is more than appreciated.

Thank you!

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (5 by maintainers)

Most upvoted comments

Well, I took a go at this, and found something interesting. I was able to get it to work by placing the following in /src/plugins/amplify.js

import Amplify, * as AmplifyModules from 'aws-amplify'
import AmplifyPlugin from 'aws-amplify-vue'
import AwsExports from './aws-exports'
import SignIn from 'aws-amplify-vue/src/components/authenticator/SignIn.vue'
import SignUp from 'aws-amplify-vue/src/components/authenticator/SignUp.vue'
import SignOut from 'aws-amplify-vue/src/components/authenticator/SignOut.vue'
import ConfirmSignUp from 'aws-amplify-vue/src/components/authenticator/ConfirmSignUp.vue'
import ConfirmSignIn from 'aws-amplify-vue/src/components/authenticator/ConfirmSignIn.vue'
import ForgotPassword from 'aws-amplify-vue/src/components/authenticator/ForgotPassword.vue'
import Authenticator from 'aws-amplify-vue/src/components/authenticator/Authenticator.vue'
import SetMfa from 'aws-amplify-vue/src/components/authenticator/SetMFA.vue'
import RequireNewPassword from 'aws-amplify-vue/src/components/authenticator/RequireNewPassword.vue'

Amplify.configure(AwsExports)

export default ({ Vue }) => {
  Vue.prototype.$Amplify = Amplify
  Vue.use(AmplifyPlugin, AmplifyModules)

  Vue.mixin({
    components: {
      amplifySignIn: SignIn,
      amplifySignUp: SignUp,
      amplifySignOut: SignOut,
      amplifyConfirmSignUp: ConfirmSignUp,
      amplifyConfirmSignIn: ConfirmSignIn,
      amplifyForgotPassword: ForgotPassword,
      amplifyAuthenticator: Authenticator,
      amplifySetMfa: SetMfa,
      amplifyRequireNewPassword: RequireNewPassword
    }
  })
}

Then I was able to construct the SignIn box like this in /src/pages/index.vue:

    <amplify-authenticator></amplify-authenticator>

screen shot 2019-01-11 at 13 38 03

The mixin makes it available everywhere (the so-called “global mixin” approach) This seemed to be important too:

Vue.prototype.$Amplify = Amplify

nothingismagick on Jan 13, 2019

Link to the Tutorial https://medium.com/quasar-framework/creating-a-quasar-framework-application-with-aws-amplify-services-part-1-4-9a795f38e16d

nothingismagick on Apr 1, 2019

vue.runtime.esm.js?2b0e:587 [Vue warn]: Unknown custom element: <amplify-authenticator> - did you register the component correctly? For recursive components, make sure to provide the "name" option. I had the same issue when trying to add Amplify into an existing Vue project (worked fine with a fresh project).

In my case, it turned out to be a simple mistake. I just had to delete the previous yarn.lock file and re-run yarn install. Then Amplify started working in the existing project.

somanypuppies on Mar 27, 2019

I have this working with the quasar CLI and everything was pretty easy, straight forward. Didn’t have to add all that junk in my amplify.js either.

mfreeman451 on Mar 24, 2019

Hello and thank you for taking the time to reply to this – It was exactly this, all working now!

heitorlessa on Jan 3, 2019